TailwindCSS 中的 transition-all 和 transition 有啥区别

Posted 2023-03-06

【中文标题】TailwindCSS 中的 transition-all 和 transition 有啥区别

【英文标题】：What is the difference between transition-all and transition in TailwindCSSTailwindCSS 中的 transition-all 和 transition 有什么区别

【发布时间】：2021-07-25 12:56:18

【问题描述】：

Tailwind 提供了多种实用程序来控制哪些 CSS 属性转换，其中有 transition 和 transition-all。

我检查了这两个类的 CSS 属性，这里它们的顺序相同。

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

这两个类有什么区别，我应该使用哪一个来进行一般转换？

【参考方案1】：

要了解差异，您需要了解有关动画属性的重要内容。其中一些会触发布局更改，而另一些则不会。

触发布局更改的属性会对性能产生影响，因此建议尽可能避免使用它们

不触发布局更改的属性对性能的影响较小，建议对其进行动画处理。

tailwind 的 transition 类将第二组属性（不触发布局更改的属性）分组，而 transition-all 将所有属性分组。

最好依靠transition 来获得良好的性能，您应该尽可能避免使用transition-all，但如果您必须为所有属性设置动画，则使用它。

这是一个很好的参考，可以帮助您理解我在说什么：https://csstriggers.com/

如果您检查color，您可以阅读：

改变颜色不会触发任何几何变化，这很好。

附带说明，transform 在性能方面是最好的。不会触发布局变化，也不会触发绘画：

改变transform不会触发任何几何变化或绘画，这非常好。这意味着该操作很可能由合成器线程在 GPU 的帮助下执行。

【参考方案2】：

正如您所提到的，Tailwind 的 transition 类为一组有限的 CSS 属性定义了转换：background-color、border-color、color、fill、stroke、opacity、box-shadow、 transform, filter, backdrop-filter.

当使用transition-all 时，所有可以转换的属性都将 - 这包括所有animatable CSS properties（transition 中的属性等等）。

使用其中一个将取决于您要为哪些属性设置动画，如果它们都被transition 覆盖，那么就没有必要使用transition-all。

【参考方案3】：

我认为如果您需要所有属性，最好使用transition-all 但如果您想具体使用transition-properties 实用程序来指定哪些属性在更改时应转换。

例如transition-color 将是 transition-property: background-color, border-color, color, fill, stroke; 顺风doc

【讨论】：

我说的是特定的transition 类，它引用了您在CSS 中可以看到的所有属性，但仍然具有与transition-all 不同的语法。我想知道它们是否有任何不同。