React + Tailwind CSS：边距过渡

Posted 2023-03-06

【中文标题】React + Tailwind CSS：边距过渡

【英文标题】：React + Tailwind CSS: Transition on margin

【发布时间】：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 属性。您需要使用绝对定位或数字边距定义。

Animatable CSS properties