我有一个使用 Framer Motion 在父元素中设置动画的项目,以及使用
whileInView
和 staggerChildren
的一些元素。
我正在使用 Tailwind CSS 来设置这些元素的样式,但我需要动态设置其中一些元素的边距。 Tailwind 不支持动态值,因此我按照 Tailwind 文档中的建议将边距属性移至内联
style
属性。
问题是,当 Framer Motion 完成动画时,样式属性会被覆盖。 (我动态计算的边距与动画无关 - 动画只是修改不透明度。)
示例代码:
const div1 = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
delay: 1,
staggerChildren: 1.5
}
}
}
const item = {
hidden: { opacity: 0 },
show: { opacity: 1 }
}
...
<motion.div
ref={middleDiv}
variants={middleText}
initial="hidden"
whileInView="show"
viewport={{ once: true }}>
<motion.div
className='flex relative w-full'
style={{ marginRight: dynamicMarginCalculation}}
variants={item}
>
{/* child elements */}
</motion.div>
</motion.div>
动态边距计算正确,直到我将元素滚动到视图中并且 Framer Motion 执行
opacity
动画。完成后,它会将我的 style={{...}}
替换为 style="opacity : 1"
,导致边距消失。
有没有办法让 Framer 将其属性添加到内联
style
属性而不是覆盖它?
感谢您的宝贵时间
我也面临着同样的问题,有人知道这件事的主要原因吗?