顺风过渡宽度

Posted 2023-03-06

【中文标题】顺风过渡宽度

【英文标题】：Tailwind transition width

【发布时间】：2021-08-27 01:39:13

【问题描述】：

我无法理解如何使用 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- d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
  </svg>
</button>

【参考方案1】：

我认为您需要 transition-duration css 属性，该属性对应于 transition-number tailwind 类 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/ 抱歉，我之前没有注意到这一点。

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