Framerjs 如何使用帧运动'；s何时控制过渡动画开始

我试图在子元素交错动画完成后，在父元素上设置

display:none

。My

li

元素淡出，然后父级

ul

应更新为

display:none

我可以在转换中设置一个延迟，但我会尝试进入属性。我试过：

const variants = {
  open: {
      display: 'block',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - this will work
          }
      }
  }
};

很明显，我得到的语法不正确或不能被使用，因为我打算

import*as React from“React”；
从“react dom”导入{render}；
从“帧运动”导入{motion，useCycle}；
常量变量={
开放式：{
显示：“块”，
可见性：“可见”，
过渡：{
儿童：0.17，
儿童：0.2，
}
},
关闭：{
显示：“无”，
过渡：{
儿童：0.05，
方向：-1，
显示：{
时间：“后继子女”//延迟：1-将起作用
}
}
}
};
常量变量={
开放式：{
y:0，
不透明度：1，
过渡：{
y:{刚度：1000，速度：-100}
}
},
关闭：{
y:50，
不透明度：0，
过渡：{
y:{刚度：1000}
}
}
}
常量项目=（道具）=>(
{props.name}
)
常量应用=（）=>{
const[isOpen，toggleOpen]=使用周期（false，true）；
返回(
切换动画
{Array.from（['vader'，'maul'，'ren']）.map（（项，索引）=>(
))}
);
};
render（，document.getElementById（“根”））；

当

应该是

转换

对象的属性，而不是

显示

这似乎有效（除非我误解了你的意图）：

import * as React from "react";
import { render } from "react-dom";
import {motion, useCycle} from 'framer-motion';

const ulVariants = {
  open: {
      display: 'block',
      visibility: 'visible',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - will work
          }
      }
  }
};

const liVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
        y: {stiffness: 1000, velocity: -100}
    }
  },
  closed: {
      y: 50,
      opacity: 0,
      transition: {
          y: {stiffness: 1000}
      }
  }
}

const Item = (props) => (
  <motion.li
    variants={liVariants}
  >
    {props.name}
  </motion.li>
)

const App = () => {
  const [isOpen, toggleOpen] = useCycle(false, true);
  return (
    <>
      <button onClick={toggleOpen}>Toggle Animation</button>
      <motion.ul
        variants={ulVariants}
        animate={isOpen ? 'open': 'closed'}
      >
          {Array.from(['vader', 'maul', 'ren']).map((item, index) => (
            <Item key={item} {...{name: item}} />
          ))}
      </motion.ul>
    </>
  );
};

render(<App />, document.getElementById("root"));

closed: {
  display: 'none',
  transition: {
      staggerChildren: 0.05,
      staggerDirection: -1,
      when: "afterChildren"
  }
}