jQuery と CSS トランジションはどのようにして DOM 要素の色の変化をスムーズにアニメーション化できるのでしょうか?

DOM 要素の色のスムーズな変更のための jQuery アニメーション CSS クラス遷移

はじめに
この記事では、CSS をアニメーション化するという課題に取り組みますスタイルシートの制御を維持しながら、jQuery を使用してさまざまなオブジェクトの属性を変更します

例 1: 専用の CSS プロパティを使用してアニメーション化する
animate() を使用すると、アニメーション コード内で CSS プロパティを直接操作できます:

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

ただし、このアプローチではスタイル定義がスタイルシートから分離されるため、

例 2: AddClass/RemoveClass の代替案
スタイルシート クラスを活用するには、以下に示すように addClass() と RemoveClass() を使用できます。

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

一部のアニメーションは期待どおりに動作しますが、アニメーション中に適用される一時的なスタイルにより中断されるものもあります。アニメーション。

理想的なソリューション
アニメーション化されたクラス遷移に jQuery を利用しながら、CSS クラス定義を 1 か所 (スタイルシート) で維持することを目指しています。

提案されたソリューション
これを実現するには、CSS トランジションを jQuery のクラス操作と組み合わせて活用することをお勧めします。能力。デモンストレーションについては、この実際の例を確認してください:

<div>

#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').mouseover(function() {
  $(this).addClass('blue');
}).mouseout(function() {
  $(this).removeClass('blue');
});

以上がjQuery と CSS トランジションはどのようにして DOM 要素の色の変化をスムーズにアニメーション化できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。