CSS 禁用/关闭继承的 CSS3 过渡

Disable/turn off inherited CSS3 transitions

提问by Scotty

So i have the following css transitions attached to the a element:

所以我将以下 css 转换附加到 a 元素：

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

Is there a way to disable these inherited transitions on specific a elements?

有没有办法在特定的 a 元素上禁用这些继承的转换？

a.tags { transition: none; } 

Doesn't seem to be doing the job.

似乎没有在做这项工作。

回答by David says reinstate Monica

The use of transition: noneseems to be supported (with a specific adjustment for Opera) given the following HTML:

transition: none鉴于以下 HTML ，似乎支持使用（对 Opera 进行了特定调整）：

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

...and CSS:

...和CSS：

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

JS Fiddle demo.

JS小提琴演示。

Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.

在 Ubuntu 11.04 上使用 Chromium 12、Opera 11.x 和 Firefox 5 进行测试。

The specific adaptation to Opera is the use of -o-transition: color 0 ease-in;which targets the same property as specified in the other transitionrules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransitionselector is simply to provide a specific selector for the elements without transitions.

对Opera的具体适配是使用-o-transition: color 0 ease-in;which针对与其他transition规则中指定的属性相同的属性，但将过渡时间设置为0，有效防止了过渡的明显。a.noTransition选择器的用途只是为没有过渡的元素提供一个特定的选择器。

---

---

Editedto note that @Frédéric Hamidi's answer, using all(for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.

编辑注意到@Frédéric Hamidi 的回答，使用all（至少对于 Opera 而言）比列出您不想转换的每个单独的属性名称要简洁得多。

Updated JS Fiddle demo, showing the use of allin Opera: -o-transition: all 0 none, following self-deletion of @Frédéric's answer.

更新了 JS Fiddle 演示，显示了all在 Opera: 中的使用-o-transition: all 0 none，自我删除@Frédéric的回答。

回答by Will Madden

If you want to disable a single transition property, you can do:

如果要禁用单个过渡属性，可以执行以下操作：

transition: color 0s;

(since a zero second transition is the same as no transition.)

（因为零秒转换与无转换相同。）

回答by Rory O'Kane

Another way to remove all transitions is with the unsetkeyword:

删除所有转换的另一种方法是使用unset关键字：

a.tags {
    transition: unset;
}

In the case of transition, unsetis equivalent to initial, since transitionis not an inherited property:

在 的情况下transition，unset等价于initial，因为transition不是继承的属性：

a.tags {
    transition: initial;
}

A reader who knows about unsetand initialcan tell that these solutions are correct immediately, without having to think about the specific syntax of transition.

了解unset并initial能立即判断这些解决方案正确的读者，无需考虑transition.

回答by Shota

Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.

基于 W3schools 的默认过渡值是：all 0s ease 0s，这应该是禁用过渡的跨浏览器兼容方式。

Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp

这是一个链接：https: //www.w3schools.com/cssref/css3_pr_transition.asp

回答by freeworlder

You could also disinherit all transitions inside a containing element:

您还可以取消继承包含元素内的所有转换：

CSS:

CSS：

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML:

HTML：

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>