编辑

Question

我无法理解如何使用 TailwindCSS 过渡实用程序在此 Angular 组件中执行简单的宽度过渡。例如，下面的按钮通常显示一个 SVG 图标。但是，它偶尔会显示一条文本消息。当显示文本消息而不是 SVG 图标时，按钮的宽度会发生变化。我想为宽度变化（在两个方向）添加一个过渡，但我不知道如何。任何帮助表示赞赏！

<button class="bg-green-600 text-green-100 ring-green-400 p-4 rounded-full focus:outline-none">
  <span *ngIf="buttonText" class="font-semibold">{{buttonText}}</span>
  <svg *ngIf="!buttonText" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
  </svg>
</button>

Answer 1

我认为您需要 transition-duration css 属性，它对应于 transition-{number} 顺风类 https://tailwindcss.com/docs/transition-duration。您还可以使用过渡计时函数 https://tailwindcss.com/docs/transition-timing-function

编辑

问题不在于顺风，而在于 css 本身，看看这个 css-trick https://css-tricks.com/using-css-transitions-auto-dimensions/ 抱歉，我之前没有注意到这一点。

解决此问题的一种方法是将 width css 属性设置为其实际计算的宽度。

顺风过渡宽度

1 个答案:

编辑