禁用/关闭继承的CSS3过渡-Java 学习之路

108

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

似乎没有做这项工作 .

4 回答

155

在给定以下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 选择器只是为没有过渡的元素提供特定的选择器 .

Edited 注意@Frédéric Hamidi's answer，使用 all （至少用于Opera）比列出你不想要转换的每个属性名称要简洁得多 .

Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none，在自我删除_1746831的答案之后 .

回复于 2024-05-02T07:08:00+08:00

0
如果要禁用单个转换属性，可以执行以下操作：
```
transition: color 0s;
```
（因为零秒转换与没有转换相同 . ）
回复于 2024-05-02T07:08:00+08:00
22
删除所有转换的另一种方法是使用unset关键字：
```
a.tags {
    transition: unset;
}
```
在transition的情况下， unset 等同于initial，因为 transition 不是继承的属性：
```
a.tags {
    transition: initial;
}
```
知道 unset 和 initial 的读者可以立即知道这些解决方案是正确的，而无需考虑 transition 的具体语法 .
回复于 2024-05-02T07:08:00+08:00

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

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>

回复于 2024-05-02T07:08:00+08:00

禁用/关闭继承的CSS3过渡

4 回答

相关问题