スムーズなアニメーションのために DOM 要素のサイズ変更中に CSS トランジションをエレガントに無効にするにはどうすればよいですか?

スムーズなサイズ変更のための CSS トランジション効果のエレガントな無効化

シームレスなサイズ変更には CSS トランジション効果を無効にすることが重要であるという状況に遭遇しました。 DOM 要素。これに対処するために、洗練された効果的なソリューションを検討してみましょう。

トランジションを無効にする CSS:

既存のトランジション ルールをオーバーライドする '.notransition' クラスを作成します:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

JavaScript実装:

プレーン Javascript の使用:

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow
someElement.classList.remove('notransition'); // Re-enable transitions

の使用jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow
$someElement.removeClass('notransition'); // Re-enable transitions

説明:

1. 「.notransition」クラスを適用します: このクラスは遷移を無効にしますCSSトランジションをオーバーライドすることによる効果
2. 必要な CSS 変更を実行します: トランジションを無効にして、必要に応じて高さまたは他の CSS プロパティを変更します。
3. リフローをトリガーする: 読み取り要素の offsetHeight プロパティでリフローを強制し、保留中の CSS をフラッシュします
4. クラスを元に戻す: リフローがトリガーされたら、'.notransition' クラスを削除してトランジションを復元します。

このアプローチにより、CSS トランジションが確実に行われます。サイズ変更プロセス中に正常に無効化され、再度有効化されるため、スムーズでシームレスなアニメーションが可能になります。

以上がスムーズなアニメーションのために DOM 要素のサイズ変更中に CSS トランジションをエレガントに無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。