css - 禁用/关闭继承的 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 .

在 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 之后的答案。