Comment puis-je désactiver de manière fiable les transitions CSS en JavaScript ?

Surmonter les défis des transitions CSS

Dans le domaine du développement Web, la désactivation temporaire des effets de transition CSS peut présenter un défi. Bien qu'il puisse sembler simple de simplement basculer entre une classe CSS, cette approche échoue souvent en raison de l'optimisation du navigateur.

La solution : une classe sans transition et une redistribution forcée

Pour désactiver efficacement les transitions, une classe CSS peut être utilisée pour définir toutes les propriétés de transition sur aucune en utilisant l'indicateur !important. Cependant, cette classeだけでは、期待した動作は得られません。

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

L'astuce consiste à forcer une redistribution de l'élément après avoir modifié ses propriétés CSS. Cette actualisation supprime les modifications CSS en attente, garantissant ainsi que la transition est désactivée. Une méthode fiable consiste à accéder à la propriété offsetHeight de l'élément.

Implémentation 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

Mises en garde

Assurez-vous que !important est suffisant pour remplacer les styles existants. Sinon, envisagez d'utiliser element.style.setProperty pour désactiver et réactiver les transitions manuellement. Les préfixes des fournisseurs peuvent être omis, car la plupart des navigateurs modernes prennent en charge les transitions sans eux.

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!