为什么 y 和 x 轴参数对成帧器运动中的 staggerChildren 动画不起作用？

Question

我的问题很简单，但我正在努力寻找解决方案。在这里，我试图为句子中的每个字母创建一个惊人的动画，我想使用 y 轴作为参数来制作动画，但我没有得到我想要的结果，因为句子完全安装而没有动画。但是当我尝试使用不透明度作为参数时，它工作得很好。我在这里做错了什么？任何帮助将不胜感激:)

// import "./styles.css";
import { motion } from "framer-motion";


export default function App() {
  const quotes = "Hello World.";

  const parent = {
    animate: {
      transition: {        
        staggerChildren: 0.1,
      },
    },
  };

  const child = {
    initial: { y: 400 },
    animate: {
      y: 0,
    },
  };
  return (
    <div>
      <motion.div variants={parent} initial='initial' animate='animate'>
        {
          quotes.split('').map((item, index) => (
            <motion.span variants={child} key={index}>{item}</motion.span>
          ))
        }
      </motion.div>
    </div>
  );
}

为了帮助您了解我的问题，这里是codesandbox示例 https://codesandbox.io/s/busy-mountain-fv58xc?file=/src/App.js:0-620

Answer 1

动画 x 和 y 不适用于 <span>，因为它是内联元素。它随内容流动，没有明确的 x 和 y 位置来设置动画。

您可以将跨度更改为 block-level 元素（如 div），或者您可以添加一些样式来告诉跨度显示为块：

<motion.span style={{display: "inline-block"}} variants={child} key={index}>
    {item}
</motion.span>

为什么 y 和 x 轴参数对成帧器运动中的 staggerChildren 动画不起作用？

Why y and x axis parameter didn't work for staggerChildren animation in framer motion?

animation

reactjs

framer-motion