Bessere Lösung für HTML-Element Folie von rechts mit CSS-Transformation?

Question

Ich habe eine Seitenleiste mit fester Breite, die von rechts einrastet und dann wieder herausrutscht, wenn ich sie ablehne.

Ich ändere die Anzeige der Seitenleiste, um sie zu blockieren, und füge eine animierte Klasse bei einem Benutzerklick hinzu.

Ich habe ein Keyframe erstellt, um es in .3s nach rechts zu verschieben, aber es sei denn, ich benutze eine Javascript-Funktion, um die Anzeige auf none zurückzusetzen (nach 300 Millisekunden) des Bildschirms. Das funktioniert aber scheint hacky, gibt es einen schöneren Weg, dies zu tun?

Jsfiddle hier: https://jsfiddle.net/wLL468jj/1/

@-webkit-keyframes slideRight { 
    0% { 
     -webkit-transform: translateX(-100%); 
    } 
    100%{ 
     -webkit-transform: translateX(0%); 
    } 
} 

Hier ist die JS, die eine Klasse fügt nach rechts dann Anzeige auf keine animieren.

$("#popup").addClass('animate-right'); 
setTimeout(function(){ popup.style.display = "none" }, 300); 

Answer 1

Eine Möglichkeit könnte sein, in das animationend Ereignis einzuhaken, der ausgelöst wird, wenn ein CSS-Animation abgeschlossen ist (Reference).

Dieses Ereignis ist nicht standardmäßig in allen Browsern, daher können Sie Modernizr verwenden, um den richtigen Ereignisnamen abhängig vom Browser abzurufen. Etwas wie folgt aus:

var animEndEventNames = { 
     'WebkitAnimation': 'webkitAnimationEnd', 
     'OAnimation': 'oAnimationEnd', 
     'msAnimation': 'MSAnimationEnd', 
     'animation': 'animationend' 
    }, 
    // animation end event name 
    animEndEventName = animEndEventNames[Modernizr.prefixed('animation')]; 

Jetzt können Sie die Variable animEndEventName verwenden und einen Listener für dieses Ereignis hinzuzufügen. So etwas wie dieses vielleicht:

$("#popup").on(animEndEventName, function() { 
     if (!$(this).hasClass('animate-right')) 
      $(this).hide(); 
    }); 

Dies sollte Ihnen eine grobe Vorstellung geben, Sie offensichtlich brauchen Somethings für das Setup zu optimieren.