122

所以我在一个元素上附加了以下 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; }

似乎没有做这项工作。

4

6 回答 6

170

给定以下 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 小提琴演示。

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

对 Opera 的具体适配是使用-o-transition: color 0 ease-in;which 目标与其他规则中指定的属性相同transition，但将过渡时间设置为0，这有效地防止了过渡被注意到。选择器的使用a.noTransition只是为没有过渡的元素提供特定的选择器。

编辑注意到@Frédéric Hamidi 的回答，使用all（至少对于 Opera）比列出您不想进行转换的每个单独的属性名称要简洁得多。

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

于 2011-07-09T11:41:49.683 回答
30

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

transition: color 0s;

（因为零秒转换与无转换相同。）

于 2015-05-25T13:55:02.310 回答
3

删除所有转换的另一种方法是使用unset关键字：

a.tags {
    transition: unset;
}

当与transition属性一起使用时，unset等价于initial，因为transition不是继承属性：

a.tags {
    transition: initial;
}

了解unset并initial可以立即判断这些解决方案是正确的读者，而无需考虑transition.

于 2018-05-08T00:32:55.667 回答
1

基于 W3schools 的默认转换值是: all 0s ease 0s，这应该是禁用转换的跨浏览器兼容方式。

这是一个链接：https ://www.w3schools.com/cssref/css3_pr_transition.asp

于 2019-01-24T12:03:32.493 回答
0

您还可以取消继承包含元素内的所有转换：

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>
于 2016-12-30T12:11:50.930 回答
0

此外，还可以设置将通过设置属性进行转换的属性列表transition-property: width, height;，更多详细信息请点击此处

于 2020-12-23T10:04:03.083 回答