禁用/关闭继承的 CSS3 过渡

Question

因此，我将以下 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; } 

似乎没有做好这项工作。

Answer 1

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>

考虑到以下 HTML： ...和 ​​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;
}

/nW2Wt/" rel="noreferrer">JS Fiddle 演示。

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

对 Opera 的具体修改是使用 -o-transition: color 0 escape-in​​; ，它的目标与其他 transition 规则中指定的属性相同，但设置转换时间为 0，这有效地防止了转换变得明显。使用a.noTransition选择器只是为没有转换的元素提供一个特定的选择器。

---

编辑注意@Frédéric Hamidi的回答< /a>，使用 all （至少对于 Opera 来说）比列出您不想要的每个单独的属性名称要简洁得多进行过渡。

更新了 JS Fiddle 演示，展示了 Opera 中 all 的使用：-o-转换：全部 0 无，在自删除 @Frédéric 的答案。

Answer 2

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

transition: color 0s;

因为零秒过渡与无过渡相同。）

Answer 3

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

a.tags {
    transition: unset;
}

与 transition 属性，unset 相当于 initial，因为 transition 不是继承属性：

a.tags {
    transition: initial;
}

了解 unset< 的读者/code> 和 初始可以立即判断这些解决方案是正确的，而无需考虑 transition 的具体语法。

Answer 4

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

Answer 5

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

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>

Answer 6

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

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