Comment puis-je désactiver et réactiver efficacement les transitions CSS en JavaScript ?

Désactivation et réactivation des transitions CSS

Dans une application Web typique, les éléments DOM peuvent être soumis à diverses transitions CSS. Cependant, il peut y avoir des cas où vous devrez désactiver temporairement ces effets lors de certaines opérations, comme le redimensionnement d'un élément.

Désactivation et réactivation élégantes

Pour élégamment désactivez et réactivez les transitions CSS, vous pouvez utiliser une combinaison de CSS et JavaScript.

CSS Classe :

Créer une classe CSS "notransition" pour remplacer les propriétés de transition d'un élément :

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

JavaScript :

Sans jQuery :

const someElement = document.getElementById("some-element");

// Disable transitions
someElement.classList.add('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant(someElement);

// Trigger a reflow
someElement.offsetHeight;

// Re-enable transitions
someElement.classList.remove('notransition');

Avec jQuery :

const $someElement = $('#some-element');

// Disable transitions
$someElement.addClass('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant($someElement);

// Trigger a reflow
$someElement[0].offsetHeight;

// Re-enable transitions
$someElement.removeClass('notransition');

Explication :

1. Ajoutez la classe "notransition" pour désactiver les transitions.
2. Appliquez celle de votre choix. Modifications CSS apportées à l'élément.
3. Déclenchez une redistribution forcée en lisant le offsetHeight de l'élément propriété.
4. Supprimez la classe "notransition" pour réactiver les transitions.

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!