要素のサイズをスムーズに変更するために CSS トランジション効果を一時的に無効にするにはどうすればよいですか?

CSS トランジション効果を一時的に無効にする

Web 開発では、要素に変更を加えるときに、サイズ変更や外観の調整をスムーズに行うために、CSS トランジション効果を無効にすることが必要になることがよくあります。最もエレガントな解決策は次のとおりです:

解決策

CSS クラスを作成します:

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

JavaScript を使用します (なし) jQuery):

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

jQuery で JavaScript を使用する:

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

説明:

これソリューションは CSS クラスを使用して、既存の遷移設定を ! important でオーバーライドします。次に、クラスを要素に追加し、必要な CSS 変更を加え、offsetHeight を使用してリフローを強制し、最後にクラスを削除してトランジションを再度有効にします。

考慮事項

• 次のことを確認してください。 .notransition は既存のルールをオーバーライドします (CSS で ! important を使用することを検討してください)。
• 後にリフローを強制するoffsetHeight を読み取るか、別の適切なメソッドを使用してトランジションを無効にします。
• このソリューションはブラウザ間で動作し、CSS トランジション効果を一時的に無効にする最もエレガントな方法です。

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