CSS-Animation-Pop-in nach Pop-Out wieder miteinander in Konflikt

Question

Ich habe ein eigenartiges Problem, das ich nicht erwarten sah. Here is a codepen für die Situation. Das ist der Fall:

Ich habe eine versteckte div, die bei einem Klick auf die Schaltfläche erscheint, und erscheint nach dem Schließen. Dies wird mit jQuery show/hide behandelt. Für die UX wollte ich eine subtile Pop-in-Animation via CSS hinzufügen. Ich fügte hinzu, die folgenden:

.popout { animation: popout .2s ease;} 
.popin { animation: popin .2s ease;} 

@keyframes popout { 
    from {transform:scale(0)} 
    90% {transform:scale(1.1)} 
    to {transform:scale(1)} 
} 
@keyframes popin { 
    from {transform:scale(1)} 
    10% {transform:scale(1.1)} 
    to {transform:scale(0)} 
} 

Jetzt ist die Animationen funktionieren, aber nach dem Pop-up schließen (Hinzufügen der popin Klasse) es kehrt in den Standard-CSS-Zustand, der sichtbar ist. Das Ergebnis ist, dass das Popup-Fenster schrumpft und dann wieder erscheint, um zu bleiben. Ich kann das beheben, indem ich den CSS-Animationsaufruf forwards hinzufüge, aber das zwingt die Animation, unabhängig vom anderen Klick weiterzumachen. Mit anderen Worten; Wenn ich der CSS-Animation forwards hinzufüge, bleibt sie verborgen, wird aber nicht angezeigt, wenn Sie sie erneut öffnen (weil die forwards noch aktiv ist).

Ich wieder verweisen auf the Codepen, wo Sie es sehen und selbst ausprobieren können. Wenn Sie forwards der Klasse .popin hinzufügen, bleibt sie nach dem Schließen verborgen, kann aber nicht wieder geöffnet werden.

Also ich frage mich, wo mein Denkprozess falsch gelaufen ist; Können wir eine forwards Einstellung überschreiben oder stoppen? Fehle ich etwas Offensichtliches? Oder ist das nicht der richtige Weg und sollte ich stattdessen in die jQuery-Animation schauen?

Answer 1

Vor allem, wie Sie popin/popout Klassen hinzufügen, entfernen Sie nicht die alte, so endet mit beiden auf dem Element, so dass es viel schwieriger (wenn nicht unmöglich) zu kontrollieren.

$('.open').click(function() { 
    //... 
    $('popup').removeClass('popin').addClass('popout'); 
}); 

$('.close').click(function() { 
    //... 
    $('popup').removeClass('popout').addClass('popin'); 
}) 

Außerdem müssen Sie berücksichtigen, dass, sobald Animation endet, wird das Element CSS Regeln gelten auf sie zu, was auch immer zurückkehrt. So müssen Sie die scale() Transformationen auf die Klassendefinitionen hinzuzufügen, wenn Sie wollen, bestehen bleiben:

.popout { 
    /* ... */ 
    transform: scale(1); 
} 
.popin { 
    /* ... */ 
    transform: scale(0); 
} 

Arbeitsbeispiel: https://codepen.io/anon/pen/Emvjaj

---

Randbemerkung: Statt zwei Knöpfe, die sie ersetzen basierend auf dem Status wird empfohlen, dass Sie nur eine Schaltfläche haben und den Status innerhalb der Funktion, die Sie aufrufen, ändern. Einige Browser/Geräte können beim Umschalten auf beide Schaltflächen klicken. Es ist sicherer mit einem Knopf.

Answer 2

Ich habe Ihr Beispiel in Codepen, getestet, indem Sie einfach die alternativen Klassen entfernen und die forward-fill-Eigenschaft an Ort und Stelle zu lassen, scheint Ihr Code gut zu funktionieren.