如何使用Framer Motion的何时控制过渡动画的开始

问题描述

一旦孩子交错动画完成，我将尝试在父元素上设置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
          }
      }
  }
};

很明显，我得到的语法不正确或无法按预期使用。

Sandbox Demo

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

const ulVariants = {
  open: {
      display: 'block',visibility: 'visible',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"));

解决方法

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

这似乎可行（除非我误解了您要做什么）：

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

Code Sandbox

framer-motion framerjs