为什么我的 framer-motion 内容没有动画？答案

【问题标题】：Why does my framer-motion content doesn't animating?为什么我的 framer-motion 内容没有动画？
【发布时间】：2022-11-19 16:15:49
【问题描述】：

我用文档创建了组件，但它不起作用，帮助解决它

const Intro = () => {
    const navAnimation = {
        hidden: {
            y: -500,
            opacity: 0
        },
        visible: {
            y: 0,
            opacity: 1
        },
    }
return (
<div> 
    <motion.div initial={'hidden'} whileInView={'visible'}> 
        <motion.div variants={navAnimation}>
            <p>text</p>
        </motion.div>
    </motion.div>
</div>

【问题讨论】：

为什么你用另一个 motion.div 包装 navAnimation？

标签： javascript reactjs typescript framer-motion

【解决方案1】：

我认为问题出在有 2 个 motion.div 元素你的问题是因为 navAnimation 没有应用到父元素如果您只需将 variants={navAnimation} 添加到父元素，您的问题就会得到解决

<motion.div initial='hidden' variants={navAnimation} whileInView='visible'> 
        <p>text</p>
</motion.div>

【讨论】：