React + Tailwind CSS：边际过渡

Question

我需要使用 Tailwind 向元素的边距添加过渡。 我希望边距顺利过渡。

<div 
  id="thumb" 
  className={`transition-spacing duration-300 ease-in-out ${switchState ? "ml-auto" : "mr-auto"}`}
>
</div>

现在它只是立即将边距从 mr-auto 切换到 ml-auto 而没有过渡。 这是我的顺风配置转换：

transitionProperty: {
  width: 'width',
  spacing: 'margin, padding',
}

我可以验证 switchState 是否有效。 为什么过渡不起作用？

Answer 1

您只能在两个数值之间为属性设置动画。

考虑这个片段：

<div class="container group">
  <div class="bg-yellow-600 w-12 h-12 ml-0 group-hover:ml-96 transform duration-300"></div>
</div>

简而言之， ml-auto和mr-auto不是为元素设置动画的正确 css 属性。 您需要使用绝对定位或数字边距定义。

动画 CSS 属性