如何使用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
          }
      }
  }
};

很明显，我的语法不正确或无法按我的意图使用。

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',
      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"
  }
}

Code Sandbox

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

How to use Framer Motions's when to control transition animation start

framerjs

framer-motion