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

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

a.tags { transition: none; }

Doesn't seem to be doing the job.

173131 次浏览
小开
最佳答案

考虑到以下 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;，它的目标与其他 transition规则中指定的属性相同，但是将转换时间设置为 0，这有效地防止了转换被注意到。使用 a.noTransition选择器只是为没有转换的元素提供一个特定的选择器。

Edited to note that @ Fr édéric Hamidi 的回答, 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.

更新的 JS Fiddle 演示，显示了在 Opera 中使用 all: -o-transition: all 0 none ，并自动删除了 @ Fr édéric的回答。

小开

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

transition: color 0s;

(since a zero second transition is the same as no transition.)

小开

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

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>
小开

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

a.tags {
transition: unset;
}

与 transition属性一起使用时，unset等效于 initial，因为 transition不是继承的属性:

a.tags {
transition: initial;
}

了解 unset和 initial的读者可以立即判断出这些解决方案是正确的，而不必考虑 transition的具体语法。

小开

基于 W3学校的默认过渡值是: all 0s ease 0s，这应该是跨浏览器兼容的过渡禁用方式。

这里有一个链接: https://www.w3schools.com/cssref/css3_pr_transition.asp

小开

此外，还可以设置一个属性列表，通过设置属性 transition-property: width, height;，更多细节 给你来转换这些属性


提交答案