Wie können jQuery- und CSS-Übergänge Farbänderungen von DOM-Elementen reibungslos animieren?

jQuery animierte CSS-Klassenübergänge für reibungslose Farbänderungen von DOM-Elementen

Einführung
In diesem Artikel befassen wir uns mit der Herausforderung der CSS-Animation Attributänderungen an verschiedenen Objekten mit jQuery unter Beibehaltung der Kontrolle über Stylesheet-Definitionen.

Beispiel 1: Animieren mit dedizierten CSS-Eigenschaften
Mit animate() können wir CSS-Eigenschaften direkt im Animationscode manipulieren:

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

Dieser Ansatz trennt jedoch Stildefinitionen vom Stylesheet, was ist weniger wünschenswert.

Beispiel 2: AddClass/RemoveClass Alternative
Um Stylesheet-Klassen zu nutzen, können wir addClass() und removeClass() verwenden, wie unten gezeigt:

$('#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 });
});

Während einige Animationen wie erwartet funktionieren, werden andere aufgrund der vorübergehenden Unterbrechung unterbrochen Stil, der während der Animation angewendet wird.

Ideale Lösung
Wir streben danach, CSS-Klassendefinitionen an einem Ort (dem Stylesheet) zu verwalten. während Sie jQuery für animierte Klassenübergänge verwenden.

Vorgeschlagene Lösung
Um dies zu erreichen, empfehlen wir die Nutzung von CSS-Übergängen in Kombination mit den Klassenmanipulationsfunktionen von jQuery. Schauen Sie sich dieses Live-Beispiel für eine Demonstration an:

<div>
<pre class="brush:php;toolbar:false">#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');
});