为何我的framer-motion内容无动画效果？请求排查子元素队列动画问题

问题根源 #

你当前的代码中，父级motion.div仅设置了initial和whileInView，但未绑定variants，且子元素的动画不会自动继承父级的触发逻辑，导致子元素的variants未被正确调用，延迟递增的队列效果无法生效。

修正方案1：子元素独立绑定动画触发 #

直接给每个子元素设置initial、animate（或whileInView）属性，配合custom值传递延迟参数：

const Intro = () => {
    const navAnimation = {
        hidden: {
            y: -500,
            opacity: 0
        },
        visible: (custom: number) => ({
            y: 0,
            opacity: 1,
            transition: { delay: custom * 0.2 }
        }),
    }

    return (
        <div> 
            <div> 
                <motion.div 
                    custom={1} 
                    variants={navAnimation} 
                    initial="hidden" 
                    whileInView="visible"
                    viewport={{ once: true }}
                >
                    <p>text</p>
                </motion.div>
                <motion.div 
                    custom={2} 
                    variants={navAnimation} 
                    initial="hidden" 
                    whileInView="visible"
                    viewport={{ once: true }}
                >
                    <p>text</p>
                </motion.div>
            </div>
        </div>
    )
}

修正方案2：父级统一控制子元素 stagger 动画 #

使用staggerChildren属性批量控制子元素的延迟间隔，代码更简洁：

const Intro = () => {
    const navAnimation = {
        hidden: {
            transition: {
                staggerChildren: 0.2,
                delayChildren: 0
            }
        },
        visible: {
            transition: {
                staggerChildren: 0.2,
                delayChildren: 0
            }
        },
        itemHidden: { y: -500, opacity: 0 },
        itemVisible: { y: 0, opacity: 1 }
    }

    return (
        <div> 
            <motion.div 
                initial="hidden" 
                whileInView="visible"
                variants={navAnimation}
                viewport={{ once: true }}
            > 
                <motion.div variants={{ hidden: navAnimation.itemHidden, visible: navAnimation.itemVisible }}>
                    <p>text</p>
                </motion.div>
                <motion.div variants={{ hidden: navAnimation.itemHidden, visible: navAnimation.itemVisible }}>
                    <p>text</p>
                </motion.div>
            </motion.div>
        </div>
    )
}

关键注意事项 #

• 添加viewport={{ once: true }}可确保动画仅在元素首次进入视口时触发，避免滚动重复触发。
• 方案1适合需要自定义不同延迟间隔的场景，方案2适合所有子元素延迟一致的批量场景。

内容的提问来源于stack exchange，提问作者middleStackoverflower