禁用/关闭继承的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的特定调整)给出以下HTML:

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

用Chromium 12, Opera 11测试。

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

---

编辑要注意，@ fracimdsamric Hamidi的答案，使用all(至少对于Opera来说)比列出每个您不想转换的单个属性名要简洁得多。

更新的JS Fiddle演示，显示了在Opera: -o-transition: all 0 none中使用all，在自我删除@ fracimdsamric的答案后。

Answer 2

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

transition: color 0s;

(因为零秒转换和没有转换是一样的)

Answer 3

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

a.tags {
    transition: unset;
}

当与transition属性一起使用时，unset相当于initial，因为transition不是继承属性:

a.tags {
    transition: initial;
}

了解unset和initial的读者可以立即看出这些解决方案是正确的，而不必考虑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 ease 0s，这应该是跨浏览器兼容的禁用转换方式。

链接:https://www.w3schools.com/cssref/css3_pr_transition.asp