使用变体时，Framer Motion 会覆盖内联样式。有没有办法让它保留使用 style 属性设置的属性？

Question

我有一个使用 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

属性而不是覆盖它？

感谢您的宝贵时间

Answer 1

我也面临着同样的问题，有人知道这件事的主要原因吗？