html - 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

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

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

不触发布局更改的属性对性能的影响较小，建议为它们设置动画。

tailwind 的 transition 类对第二组属性(不触发布局更改的属性)进行分组，而 transition-all 对所有属性进行分组。

最好依靠 transition 来获得良好的性能，并且您应该尽可能避免使用 transition-all 但是如果您必须为 all< 设置动画/em> 然后使用它的属性。

这里有一个很好的引用，可以帮助您理解我在说什么: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.