Framer Motion中when:afterChildren属性不生效问题求助

问题出在你同时给父、子元素都设置了initial="initial"和animate="animate"属性——这会让两个元素各自独立触发动画，父元素的when: "afterChildren"无法感知子元素的动画状态，因为子元素的动画不是由父元素的状态切换驱动的。

要实现子元素动画完成后父元素再启动动画，需要做以下修改：

• 移除子元素的initial和animate属性，让父元素的状态切换来带动子元素的动画
• 确保父元素的transition配置中when: "afterChildren"生效

修改后的完整代码：

import React from 'react';
import { motion } from "framer-motion";

function App() {
    const parentVariant = {
        initial: {
            x: '0vw',
        },
        animate: {
            x: '100vw',
            transition: {
                duration: 40,
                when: "afterChildren",
            },
        },
    };

    const childVariant = {
        initial: {
            x: '0vw',
        },
        animate: {
            x: '100vw',
            transition: {
                duration: 40,
            },
        },
    };

    return (
        <div className="App">
            <motion.div
                variants={parentVariant}
                style={{ width: "100px", height: "100px", backgroundColor: "gray" }}
                initial="initial"
                animate="animate"
            >
                <motion.div
                    variants={childVariant}
                    style={{ width: "50px", height: "50px", backgroundColor: "red" }}
                />
            </motion.div>
        </div>
    );
}

export default App;

修改后，父元素切换到animate状态时，会先触发子元素的animate动画序列，等子元素的40秒动画完全结束后，父元素才会开始自身的移动动画，完全符合预期的执行顺序。

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