Comment les transitions jQuery et CSS peuvent-elles animer en douceur les changements de couleur des éléments DOM ?

Transitions de classe CSS animées jQuery pour des changements de couleur fluides des éléments DOM

Introduction
Dans cet article, nous abordons le défi de l'animation CSS modifications d'attributs sur divers objets à l'aide de jQuery tout en gardant le contrôle sur les définitions des feuilles de style.

Exemple 1 : Animer avec des propriétés CSS dédiées
En utilisant animate(), nous pouvons directement manipuler les propriétés CSS dans le code d'animation :

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

Cependant, cette approche sépare les définitions de style de la feuille de style, qui est moins souhaitable.

Exemple 2 : AddClass/RemoveClass Alternative
Pour exploiter les classes de feuilles de style, nous pouvons utiliser addClass() et removeClass(), comme démontré ci-dessous :

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

Bien que certaines animations fonctionnent comme prévu, d'autres sont perturbées en raison de la perturbation temporaire. style appliqué pendant l'animation.

Solution idéale
Nous aspirons à maintenir les définitions de classe CSS en un seul endroit (la feuille de style) tout en utilisant jQuery pour les transitions de classe animées.

Solution proposée
Pour y parvenir, nous vous recommandons d'exploiter les transitions CSS en combinaison avec les capacités de manipulation de classe de jQuery. Découvrez cet exemple en direct pour une démonstration :

<div>

#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').mouseover(function() {
  $(this).addClass('blue');
}).mouseout(function() {
  $(this).removeClass('blue');
});

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!