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

Tailwind 提供了多个实用程序来控制 CSS 属性转换，其中有transition and 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;

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

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

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

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

The transitiontailwind 类对第二组属性（不触发布局更改的属性）进行分组，而transition-all将他们全部分组。

最好是依靠transition为了获得良好的性能，您应该尽可能避免transition-all但如果你必须动画all然后使用它的属性。

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

如果您检查color https://csstriggers.com/color你可以阅读：

更改颜色不会触发任何几何形状更改，这很好。

作为旁注，transform就性能而言是最好的。它不会触发布局更改，也不会触发绘画：

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