javascript - 为什么我的 react 应用程序中没有实现动画?

我试图在加载主页时使用 framer-motion 向我的 react 应用程序添加动画。主页在代码中可以看到:

import Veggie from "../components/Veggie";
import Popular from "../components/Popular";
import { motion } from "framer-motion";
import React from 'react'

function Home() {
  return (
    <motion.div
      intial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 2 }}
    >
      <Veggie/>
      <Popular/>
    </motion.div>
  )
}

由于某种原因,在重新加载甚至重新启动整个 react 应用程序时,该动画从未在浏览器中实现。整个代码和所有组件都可以在 GitHub 存储库中看到:https://github.com/VirochaanRG/delicious

回答1

initial prop 拼写错误。其他一切看起来都正确!