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

问题描述 投票:0回答:1

我有一个使用 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
属性而不是覆盖它?

感谢您的宝贵时间

reactjs tailwind-css framer-motion
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.