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

Question

我正在尝试使用帧运动添加动画到我的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 repo上看到:repo

Answer 1

initialprop拼写错误。其他一切看起来都是正确的!