React + Tailwind CSS：边距过渡答案

【问题标题】：React + Tailwind CSS: Transition on marginReact + Tailwind CSS：边距过渡
【发布时间】：2021-03-19 07:21:02
【问题描述】：

我需要使用 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 是否有效。为什么过渡不起作用？

【问题讨论】：

【解决方案1】：

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

考虑一下这个sn-p：

<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 属性。您需要使用绝对定位或数字边距定义。

【讨论】：