Comment désactiver temporairement les transitions CSS pendant la manipulation DOM ?

Comment désactiver temporairement les effets de transition CSS

Lorsque vous travaillez avec des éléments DOM auxquels des transitions CSS sont appliquées, il peut y avoir des situations où vous devrez désactivez temporairement ces effets pour un redimensionnement en douceur. Cet article explore la solution la plus élégante pour y parvenir.

Désactivation des transitions

Pour désactiver efficacement les transitions CSS, vous pouvez créer une classe "notransition" comme celle-ci :

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

Implémentation avec JavaScript

Il existe deux façons de appliquer la classe "notransition" avec JavaScript :

Sans 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

Avec jQuery :

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

Explication

Le problème avec la désactivation des transitions est que Les navigateurs mettent en tampon les modifications de style jusqu'à la fin de l'exécution de JavaScript et les appliquent en une seule « redistribution ». Cela peut entraîner des animations indésirables. Pour forcer une redistribution et vider les modifications CSS, vous devez lire la propriété offsetHeight de l'élément.

Notes supplémentaires

• Assurez-vous que '!important' en a suffisamment poids pour remplacer les styles existants.
• Considérez les propriétés préfixées par le fournisseur pour le navigateur compatibilité.
• Cette solution convient aux navigateurs qui prennent en charge les transitions, mais rappelez-vous que tous les navigateurs ne le font pas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!