禁用/closuresinheritance的CSS3转换
所以我有以下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; }
有没有办法禁用这些inheritance的特定元素的转换?
a.tags { transition: none; }
似乎没有做这项工作。
transition: none
的使用transition: none
似乎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小提琴演示 。
在Ubuntu 11.04上使用Chromium 12,Opera 11.x和Firefox 5进行testing。
对Opera的具体适应是使用-o-transition: color 0 ease-in;
它针对与其他transition
规则中指定的属性相同的属性,但将转换时间设置为0
,这有效地防止了转换的显着性。 使用a.noTransition
select器只是为没有转换的元素提供一个特定的select器。
编辑注意到, @FrédéricHamidi的答案 , all
使用(至less对Opera来说)比列出你不想过渡的每个单独的属性名称要简洁得多。
更新了JS Fiddle演示,展示了Opera中all
的使用: -o-transition: all 0 none
,在自己删除@Frédéric的答案之后。
如果你想禁用一个转换属性,你可以这样做:
transition: color 0s;
(因为零秒转换与没有转换相同)。
你也可以取消一个包含元素中的所有转换:
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>