因此,我是新的帧运动和一些文章的帮助下,我试图错开文本,并使我的投资组合的文本显示动画,但与每一个例子,我可能会发现,我不能错开句子的个别字符和整个动画发生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
而我想要的文字显示与交错效果的动画,我不能理解这是什么错了
1条答案
按热度按时间cgh8pdjw1#
最后,这个解决方案工作了,初始和动画中相同的过渡属性子元素应该只声明变量,而不是初始和动画属性,这些属性将从父元素中获取
解决方案:
**不要问我关于动态animate属性中的变量i,我试过没有它,它仍然工作一样,但我仍然保留了它!