Question

所以我将以下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; 
}

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

a.tags { transition: none; }

似乎没有完成这项工作。

Answer 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回答后自行删除。

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

您还可以删除包含元素内的所有转换：

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 5

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

以下是链接：https://www.w3schools.com/cssref/css3_pr_transition.asp

Answer 6

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

禁用/关闭继承的CSS3过渡

6 个答案: