framerjs - 如何使用 Framer Motions 的何时控制过渡动画开始

Question

display:none一旦孩子们交错动画完成，我正在尝试设置父元素。我的li元素淡出，然后父元素ul应该更新为display:none

我可以在过渡中设置延迟，但尝试利用when属性。我努力了：

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";
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"));

Answer 1

when应该是transition对象的属性，而不是display.

这似乎有效（除非我误解了你想要做的事情）：

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

代码沙箱