TailwindCSS 中的 transition-all 和 transition 有什么区别

Question

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;

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

Answer 1

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

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

Answer 2

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

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

使用一个或另一个将取决于您要设置动画的属性，如果它们都被 transition 覆盖，则无需使用 transition-all.

Answer 3

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

触发布局变化的属性会对性能产生影响，建议尽量避免

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

tailwind 的 transition class 正在对第二组属性（不触发布局更改的属性）进行分组，而 transition-all 对所有属性进行分组。

最好靠transition来获得好的性能，你应该尽可能避免transition-all但是如果你不得不动画all属性然后使用它。

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

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

Changing color does not trigger any geometry changes, which is good.

附带说明一下，transform 在性能方面是最好的。它不会触发布局更改，也不会触发绘画：

Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.

TailwindCSS 中的 transition-all 和 transition 有什么区别

What is the difference between transition-all and transition in TailwindCSS

html

css

css-transitions

tailwind-css