停用/关闭继承的CSS3转换 [英] Disable/turn off inherited CSS3 transitions

问题描述

所以我有一个附加到a元素的css转换：

  a {
 -webkit- transition ：颜色0.1s易于，背景颜色0.1s easy-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; 
} 
  

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

  a.tags {transition：none; } 
  

似乎没有做这项工作。

解决方案

使用 transition：none 似乎支持：

 < a href =＃class =transition>内容< / a> 
< a href =＃class =transition>内容< / a> 
< a href =＃class =noTransition>内容< / a> 
< a href =＃class =transition>内容< / 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éricHamidi的回答，使用 all （对Opera至少）比列出每个单独的属性名您不想转换。

更新JS Fiddle demo，显示在Opera中使用 all ： -o-transition：all 0 none 之后自我删除 @Frédéric的答案。

So i have the following css transitions attached to the a element:

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; 
}

Is there a way to disable these inherited transitions on specific a elements?

a.tags { transition: none; } 

Doesn't seem to be doing the job.

解决方案

The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following 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>

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

Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.

The specific adaptation to Opera is the use of -o-transition: color 0 ease-in; which targets the same property as specified in the other transition rules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransition selector is simply to provide a specific selector for the elements without transitions.

---

Edited to note that @Frédéric Hamidi's answer, using all (for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.

Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, following self-deletion of @Frédéric's answer.

这篇关于停用/关闭继承的CSS3转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！