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

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フィドルデモ。

Ubuntu11.04でChromium12、Opera 11.x、Firefox5でテスト済み。

Operaへの具体的な適応は、他のルールで-o-transition: color 0 ease-in;指定されているのと同じプロパティを対象とする使用ですが、遷移時間をに設定します。これにより、遷移が目立たなくなるのを効果的に防ぎます。セレクターの使用は、遷移なしで要素に特定のセレクターを提供することです。transition0a.noTransition

@FrédéricHamidiの回答を編集して、（少なくともOperaの場合は）使用allする方が、遷移させたくない個々のプロパティ名をリストするよりもはるかに簡潔です。

all-o-transition: all 0 none@Frédéricの回答を自己削除した後、Operaでの使用を示すJSFiddleデモを更新しました。

于 2011-07-09T11:41:49.683 に答える
30

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

transition: color 0s;

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

于 2015-05-25T13:55:02.310 に答える
3

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

a.tags {
    transition: unset;
}

は継承されたプロパティではないため、transitionプロパティとともに使用すると、unsetと同等になります。initialtransition

a.tags {
    transition: initial;
}

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

于 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 に答える