next.js 帧运动文本显示动画中的文本不交错

ej83mcc0  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(84)

因此,我是新的帧运动和一些文章的帮助下,我试图错开文本,并使我的投资组合的文本显示动画,但与每一个例子,我可能会发现,我不能错开句子的个别字符和整个动画发生simuvant的所有字符在句子中。此外,当我设置循环的句子,使我可以得到个别字符的<motion.span>标签,然后y轴动画发生时,句子是作为一个整体,也不工作,只有动画作品是不透明的,也没有交错。
代码:

"use client";
import { Variants, motion } from "framer-motion";

const MainHeading = () => {
  const textVariant: Variants = {
    hidden: {
      opacity: 0,
      y: "80",
    },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        ease: "easeInOut",
      },
    },
  };

  const textContainerVariant: Variants = {
    hidden: {
      opacity: 0,
      y: "80",
    },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        staggerChildren: 0.5,
        delayChildren: 0.5,
      },
    },
  };

  const headingLine = "Full Stack Web Dev";

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={textContainerVariant}
      className="text-8xl lg:text-9xl"
    >
      {headingLine.split("").map((char, index) => {
        return (
          <motion.span
            key={char + "-" + index}
            variants={textVariant}
            initial="hidden"
            animate="visible"
            className="inline-block"
            custom={index}
          >
            {char}
          </motion.span>
        );
      })}
    </motion.div>
  );
};

export { MainHeading };

Video of how its happening
而我想要的文字显示与交错效果的动画,我不能理解这是什么错了

cgh8pdjw

cgh8pdjw1#

最后,这个解决方案工作了,初始和动画中相同的过渡属性子元素应该只声明变量,而不是初始和动画属性,这些属性将从父元素中获取

解决方案:

"use client";
import { Variants, motion } from "framer-motion";

const MainHeading = () => {
  const heading = "Full Stack Web Dev";
  const letters = Array.from(heading);
  const container: Variants = {
    hidden: {
      opacity: 0,
    },
    visible: (i = 1) => ({
      opacity: 1,
      transition: {
        staggerChildren: 0.025,
        delayChildren: 0.025 * i,
      },
    }),
  };

  const child: Variants = {
    hidden: {
      opacity: 0,
      y: 20,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 12,
      },
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 12,
      },
    },
  };

  return (
    <motion.div
      className="overflow-hidden"
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {letters.map((letter, index) => (
        <motion.span className="inline-block" key={index} variants={child}>
          {letter === " " ? "\u00A0" : letter}
        </motion.span>
      ))}
    </motion.div>
  );
};

export { MainHeading };

**不要问我关于动态animate属性中的变量i,我试过没有它,它仍然工作一样,但我仍然保留了它!

相关问题