禁用/关闭继承的 CSS3 过渡答案

【问题标题】：Disable/turn off inherited CSS3 transitions禁用/关闭继承的 CSS3 过渡
【发布时间】：2011-10-01 20:16:45
【问题描述】：

所以我在一个元素上附加了以下 CSS 过渡：

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; 
}

有没有办法在特定元素上禁用这些继承的过渡？

a.tags { transition: none; }

似乎没有做这项工作。

【问题讨论】：

标签： css css-transitions

【解决方案1】：

鉴于以下 HTML，似乎支持使用 transition: none（对 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>

...和 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.

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

对 Opera 的具体适配是使用-o-transition: color 0 ease-in;，它的目标与其他transition 规则中指定的属性相同，但将转换时间设置为0，这有效地防止了转换被注意到。使用a.noTransition 选择器只是为没有过渡的元素提供特定的选择器。

编辑注意@Frédéric Hamidi's answer，使用all（至少对于Opera）比列出您不想进行转换的每个单独的属性名称要简洁得多.

Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none，自删除@Frédéric的回答后。

【讨论】：

啊，我需要在转换之前添加浏览器特定的标签。邪恶的，干杯！
感谢歌剧没有过渡信息。
Opera 有这个区别真的很无聊
为什么你不能这样做：transition:color none, background-color 0.1s ease-in;

【解决方案2】：

如果你想禁用单个过渡属性，你可以这样做：

transition: color 0s;

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

【讨论】：

性能坚持者可能会受到冒犯，但禁用单个属性似乎是合法的。
它现在在 Chrome 中对我不起作用。这只会禁用所有继承的转换。
你能举个例子@Inversion
@WillMadden，这里jsfiddle.net/312bu8po 尝试初始状态，然后取消注释 css 中准备好的行——left 的转换将被删除。

【解决方案3】：

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

CSS：

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

HTML：

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

【讨论】：

嗯，我可能不建议这样做。该规则不适用于您应用该类的元素，仅适用于子元素，它适用于每个子元素，即使是不需要应用规则的子元素，这可能会导致特异性和进一步的可扩展性问题。
最近对我来说这是一个非常有用的解决方案，可以从 Google 地图元素中全局删除过渡，这会增加地图行为的怪异。

【解决方案4】：

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

a.tags {
    transition: unset;
}

与transition 属性一起使用时，unset 等效于initial，因为transition 不是继承属性：

a.tags {
    transition: initial;
}

了解unset 和initial 的读者可以立即知道这些解决方案是正确的，而无需考虑transition 的具体语法。

【讨论】：

unset & initial 不支持 IE
caniuse.com/#feat=css-unset-value - 如果您需要 IE11 支持，我可能会选择 initial。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

此外，还可以通过设置属性transition-property: width, height; 来设置将要转换的属性列表，更多详细信息here

【讨论】：