Kombination von Animation und Übergang funktioniert nicht richtig

Question

Ich habe versucht, einige grundlegende CSS3-Animation zu setzen. Das Ziel besteht darin, eine Klasse für das click -Ereignis einer Schaltfläche umzuschalten und basierend auf der hinzugefügten Klasse ein div zu animieren. Der Code funktioniert perfekt für die erste Iteration von toggle in Firefox, aber für andere Browser wie Chrome und für die nächste Iteration in Firefox wird die Umwandlung blitzschnell umgeschaltet. Bitte helfen Sie mir herauszufinden, was schief läuft.

Snippet:

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    animation-name: clicked; 
 
    animation-duration: 1s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes clicked { 
 
    0% { 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
    100% { 
 
    top: 100px; 
 
    left: 100px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

Ich habe auch bereit, eine Geige here.

Answer 1

Dies ist eine Art eines bekannten Verhalten mit Chrome. Firefox scheint in der Lage zu sein, die Beseitigung von Animationen reibungslos mit Übergang zu behandeln, aber Chrome tut dies nicht. Ich hatte dieses Verhalten früher auch in this thread gesehen.

Warum funktioniert das Entfernen einer Animation nicht mit dem Übergang in Chrome?

Während ich kann nicht 100% narrensichere Erklärung geben, warum dies der Fall ist, werden wir es zu einem gewissen Grad auf this HTML5Rocks article about Accelerated rendering in Chrome und this one about GPU accelerated compositing in Chrome basierend dekodieren kann.

Es scheint, dass das Element seinen eigenen Rendering-Layer erhält, weil es eine explizite position -Eigenschaft hat. Wenn eine Ebene (oder ein Teil davon) aufgrund einer Animation ungültig wird, wird in Chrome nur die Ebene neu angezeigt, die von der Änderung betroffen ist. Wenn Sie die Chrome Developer Console öffnen und die Option "Paint Rect" anzeigen, sehen Sie, dass Chrome während der Animation nur das eigentliche Element anzeigt, das animiert wird.

jedoch am Anfang und Ende der Animation eine ganze Seite neu streichen geschieht, die das Element wieder in seine ursprüngliche Lage versetzt, sofort und damit das Übergangsverhalten zu überschreiben.

$('button').click(function(){ 
 
    $('div').toggleClass('clicked'); 
 
});

div{ 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked{ 
 
    animation-name: clicked; 
 
    animation-duration: 1s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes clicked{ 
 
    0% {top: 0; left: 0;} 
 
    100% {top: 100px; left: 100px;} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

---

Was ist die Lösung?

Da Ihre Bewegung tatsächlich eine lineare Bewegung von einer Position zur anderen ist, können Sie diese ohne die Notwendigkeit einer Animation erreichen. Alles, was wir tun müssen, ist eine translate Transformation und verschiebe das Element um die erforderliche Nummer. von Pixeln, wenn die Klasse eingeschaltet ist. Da dem Element über einen anderen Selektor ein Übergang zugewiesen wird, würde das Verschieben linear erfolgen. Während die Klasse ausgeschaltet ist, bewegt sich das Element aufgrund des Übergangs auf dem Element linear wieder in seine ursprüngliche Position zurück.

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: transform; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    transform: translate(100px, 100px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

Answer 2

Es ist ein erwartetes Verhalten. Sie müssen zwei separate Animationen verwenden oder nur beim Übergang bleiben.

Ein Übergang ist eine Animation, nur eine, die zwischen zwei verschiedenen Zuständen ausgeführt wird - d. H. Einem Startzustand und einem Endzustand. Wie eine Schublade Menü, könnte der Startzustand geöffnet sein und der Endzustand könnte geschlossen werden, oder umgekehrt.

Wenn Sie etwas ausführen wollen, die nicht speziell einen Startzustand und einen Endzustand mit sich bringt, oder Sie brauchen mehr feinkörnig Kontrolle über die Keyframes in einem Übergang, dann haben Sie noch eine Animation zu verwenden.

Dies ist der Weg, um das Element mit Übergang zu animieren:

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    top: 100px; 
 
    left: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>