成帧器运动文本显示没有动画

Question

我找不到代码上的错误，并且我的文本显示不起作用。如果我做了一个简单的动画，它似乎可以工作，所以错误不在导入或任何东西上，因为库工作完美：

import { motion } from "framer-motion";

const banner = {
  animate: {
    transition: {
      delayChildren: 0.4,
      staggerChildren: 0.1,
    },
  },
};

const letterAni = {
  initial: { y: 400 },
  animate: {
    y: 0,
    transition: {
      ease: [0.6, 0.01, -0.05, 0.95],
      duration: 1,
    },
  },
};

const AnimatedLetters = ({ title }) => (
  <motion.span
    className="row-title"
    variants={banner}
    initial="initial"
    animate="animate"
  >
    {[...title].map((letter, i) => (
      <motion.span className="row-letter" variants={letterAni} key={i}>
        {letter}
      </motion.span>
    ))}
  </motion.span>
);

export default function TestFramer() {
  return (
    <div className="text-9xl">
      <AnimatedLetters title={"title"} />
    </div>
  );
}

Answer 1

您无法为内联元素（如

x

）上的

y

和

span

属性设置动画。您需要在那里使用块级元素（如

div

），或者您可以添加一些样式来告诉您的跨度表现得像块级元素：

<motion.span 
    style={{display: "inline-block"}} 
    className="row-letter" 
    variants={letterAni} 
    key={I}
>
    {letter}
</motion.span>