blocks|key|627330|text|如果要禁用单个过渡属性，可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|627331|transition:+color+0s;|code-block|syntax|javascript|627332|(因为零秒过渡等同于无过渡。)|627333|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you want to disable a single transition property, you can do:

<pre><code>transition: color 0s;
</code></pre>

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

blocks|key|843046|text|您还可以取消继承包含元素内的所有转换：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|843047|CSS：|843048|.noTrans+*{
-moz-transition:+none;
-webkit-transition:+none;
-o-transition:+color+0+ease-in;
transition:+none;
}|code-block|syntax|javascript|843049|HTML：|843050|<a+href="#">Content</a>
<a+href="#">Content</a>
<div+class="noTrans">
<a+href="#">Content</a>
</div>
<a+href="#">Content</a>|843051|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You could also disinherit all transitions inside a containing element:

CSS:

<pre><code>.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
</code></pre>

HTML:

<pre><code>&lt;a href="#"&gt;Content&lt;/a&gt;
&lt;a href="#"&gt;Content&lt;/a&gt;
&lt;div class="noTrans"&gt;
&lt;a href="#"&gt;Content&lt;/a&gt;
&lt;/div&gt;
&lt;a href="#"&gt;Content&lt;/a&gt;
</code></pre>

blocks|key|627477|text|另一种删除所有转换的方法是使用unset关键字：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|627478|a.tags+{
++++transition:+unset;
}|code-block|syntax|javascript|627479|在transition的情况下，unset等同于initial，因为transition不是继承的属性：|627480|a.tags+{
++++transition:+initial;
}|627481|了解unset和initial的读者可以立即知道这些解决方案是正确的，而不必考虑transition的特定语法。|627482|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/unset|1|https://developer.mozilla.org/en-US/docs/Web/CSS/transition|2|https://developer.mozilla.org/en-US/docs/Web/CSS/initial^0|F|5|F|5|0|0|0|1|A|G|5|O|7|Y|A|1|A|1|O|7|2|0|0|2|5|8|7|14|A|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]|$9|1L|A|1M|1|1N]]|E|$]]|$1|M|3|N|5|H|7|1O|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

Another way to remove all transitions is with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unset" rel="nofollow noreferrer"><code>unset</code></a> keyword:



<pre class="lang-css prettyprint-override"><code>a.tags {
 transition: unset;
}
</code></pre>

In the case of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition" rel="nofollow noreferrer"><code>transition</code></a>, <code>unset</code> is equivalent to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial" rel="nofollow noreferrer"><code>initial</code></a>, since <code>transition</code> is not an inherited property:

<pre class="lang-css prettyprint-override"><code>a.tags {
 transition: initial;
}
</code></pre>

A reader who knows about <code>unset</code> and <code>initial</code> can tell that these solutions are correct immediately, without having to think about the specific syntax of <code>transition</code>.

blocks|key|843206|text|基于W3schools的默认转换值是：all+0s+ease+0s，这应该是跨浏览器兼容的禁用转换的方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|843207|这里有一个链接：https://www.w3schools.com/cssref/css3_pr_transition.asp|843208|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/css3_pr_transition.asp^0|J|E|0|8|1J|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Based on W3schools default transition value is: <code>all 0s ease 0s</code>, which should be the cross-browser compatible way of disabling the transition.

Here is a link: <a href="https://www.w3schools.com/cssref/css3_pr_transition.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/css3_pr_transition.asp</a>

blocks|key|843285|text|此外，还可以通过设置属性transition-property:+width,+height;、more+details+here来设置将转换的属性列表|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|843286|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/css3_pr_transition-property.asp^0|C|Z|1P|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Additionally there is a possibility to set a list of properties that will get transitioned by setting the property <code>transition-property: width, height;</code>, more details <a href="https://www.w3schools.com/cssref/css3_pr_transition-property.asp" rel="nofollow noreferrer">here</a>

So I have the following CSS transitions attached to an element:
<pre><code>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; 
}
</code></pre>
Is there a way to disable these inherited transitions on specific elements?
<pre><code>a.tags { transition: none; } 
</code></pre>
Doesn't seem to be doing the job.

Disable/turn off inherited CSS3 transitions

因此，我将以下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 ea...

问禁用/关闭继承的CSS3转换
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用/关闭继承的CSS3转换EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用/关闭继承的CSS3转换
EN