禁用/关闭继承的CSS3过渡

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

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>

......和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小提琴演示.

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

对Opera的特定适应是使用-o-transition: color 0 ease-in;与其他transition规则中指定的相同属性,但将转换时间设置为0,这有效地防止转换变得明显.a.noTransition选择器的使用仅仅是为没有过渡的元素提供特定的选择器.

编辑注意到@FrédéricHamidi的回答,使用all(至少对Opera来说)比列出你不希望转换的每个属性名称要简洁得多.

更新了JS Fiddle演示,展示了all在Opera中的使用:-o-transition: all 0 none@自动删除@Frédéric的答案.

Answer 2

如果要禁用单个转换属性,可以执行以下操作:

transition: color 0s;

(因为零秒转换与没有转换相同.)