TailwindCSS 中的 transition-all 和 transition 有什么区别 [英] What is the difference between transition-all and transition in TailwindCSS

问题描述

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

Tailwind offers multiple utilities for controlling which CSS properties transition, among these properties there are transition and transition-all.

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

I went and checked the CSS properties for both classes and here they are in the same order.

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;

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

What is the difference between both classes and which one should I use for general transitions?

推荐答案

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

To understand the difference you need to understand an important thing about animatable properties. Some of them trigger layout changes and some of them don't.

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

A property that trigger a layout change will have an impact on the performance so it's recommended to avoid them as much as possible

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

A property that doesn't trigger a layout change will have less impact on the performance and it's recommended to animate them.

tailwind 的 transition 类将第二组属性(不会触发布局更改的属性)分组，而 transition-all 将所有属性分组.

The transition class of tailwind is grouping the second set of properties (the ones that don't trigger layout change) while transition-all group all of them.

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

It's better to rely on transition to have good performance and you should avoid as much as possible transition-all but if you are obliged to animate all the properties then use it.

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

Here is a good reference to help you understand what I am talking about: https://csstriggers.com/

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

If you check for color you can read:

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

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

顺便提一下，transform 在性能方面是最好的.它不会触发布局更改，也不会触发绘画:

As a side note, transform is the best when it comes to performance. It doesn't trigger layout change and doesn't trigger painting:

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

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 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！