Wie bleibt der Endstatus der Animation CSS und entfernen Sie die Animationseigenschaft?

Question

Ich möchte mit Endeigenschaften von CSS-Animation bleiben, aber Animationseigenschaft selbst, exmeple entfernen:

@keyframes('foo') 
{ 
    0% { opacity: 0; } 
    to { opacity: 1; } 
} 

am Anfang:

.my_element 
{ 
    opacity: 0; 
} 

Ich beantrage Animation von Javascript, so dass ich:

.my_element 
{ 
    opacity: 0; 
} 

element.style 
{ 
    animation: foo 1s forwards; #with opacity: 1; at the end. 
} 

Und jetzt brauche ich aufzuräumen:

.my_element 
{ 
    opacity: 0; 
} 

element.style 
{ 
    opacity: 1; 
} 

Wie kann ich das tun?

Answer 1

Dies tut genau das, was Sie fragen. Unter animationEnd wird der Funktion cleanUp ein Objekt übergeben, das die nach der Animation zu entfernende Klasse, die zu ersetzende Eigenschaft für das Element und den auf dem Element zu ersetzenden Eigenschaftswert enthält. Überprüfen Sie das DOM vor und nach dem Klicken auf die Schaltfläche und Sie werden sehen, dass dies richtig funktioniert.

var el  = document.querySelector(".my_element"), 
 
    cleanUp = function(data) { 
 
     el.classList.remove(data.remove); 
 
     el.style[data.prop] = data.val; 
 
    }, 
 
    startAnimation = function() { 
 
     el.classList.add("animate"); 
 
    }; 
 

 
el.addEventListener("animationend", function() { 
 
    var cleanup_data = { 
 
    remove: "animate", 
 
    prop: "opacity", 
 
    val: 1 
 
    }; 
 
    
 
    cleanUp(cleanup_data); 
 
});

@keyframes foo { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
.animate { 
 
    animation: foo 3s forwards; 
 
} 
 

 
.my_element { 
 
    opacity: 0; 
 
}

<div class="my_element">some text</div> 
 
<button onclick="startAnimation()">Start Animation</button>