时间戳

首页 > 解决方案 > React + Tailwind CSS：边距过渡

javascript - React + Tailwind CSS：边距过渡

问题描述

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

标签： javascriptcssreactjscss-transitionstailwind-css

解决方案

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

考虑这个片段：

<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 属性

推荐阅读