web-dev-qa-db-ja.com

継承された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; 
}

特定のa要素でこれらの継承された遷移を無効にする方法はありますか？

a.tags { transition: none; }

仕事をしていないようです。

csscss3transitionscss-transitions
113
Scotty

transition: noneの使用は、次のHTMLが与えられた場合にサポートされるようです（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への特定の適応は、他のtransitionルールで指定されているのと同じプロパティをターゲットとする-o-transition: color 0 ease-in;の使用ですが、遷移時間を0に設定します。移行が目立つことを効果的に防ぎます。 a.noTransitionセレクターの使用は、単に遷移なしの要素に特定のセレクターを提供することです。

Edited@FrédéricHamidi's answer 、all（少なくともOperaの場合）を使用することははるかに移行したくない個々のプロパティ名をリストするよりも簡潔です。

JS Fiddleデモを更新、Operaでallの使用を示しています：-o-transition: all 0 none 、 @Frédéric の自己削除後の答え。

161
David Thomas

単一の遷移プロパティを無効にする場合は、次を実行できます。

transition: color 0s;

（ゼロ秒遷移は遷移なしと同じであるため。）

23
Will Madden

すべての遷移を削除する別の方法は、 unset キーワードを使用することです。

a.tags {
    transition: unset;
}

transition の場合、unsetは継承プロパティではないため、initialは transition と同等です。

a.tags {
    transition: initial;
}

unsetとinitialを知っている読者は、transitionの特定の構文について考える必要なく、これらのソリューションがすぐに正しいことを知ることができます。

2
Rory O'Kane

W3schoolsのデフォルトの遷移値に基づく：all 0s ease 0sは、遷移を無効にするクロスブラウザー互換の方法でなければなりません。

リンクは次のとおりです。 https://www.w3schools.com/cssref/css3_pr_transition.asp

0
Shota

含まれている要素内のすべての遷移を継承しないこともできます。

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>
0
freeworlder