CODEWITHSUNDEEP
javascriptcssanimationopacity
Matrix
Matrix

Reputation: 3369

How stay final state of animation CSS and remove animation property?

I want to stay with final properties of css animation, but remove animation property itself, exmeple:

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

at the begining :

.my_element
{
   opacity: 0;
}

I apply animation by Javascript, so I got :

.my_element
{
   opacity: 0;
}

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

And now I need clean up :

.my_element
{
   opacity: 0;
}

element.style 
{
  opacity: 1;
}

How can I do that?

Upvotes: 0

Views: 371

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

This does exactly what you're asking. On animationEnd, the cleanUp function is passed an object containing the class to remove after the animation, the property to replace on the element, and the property value to replace on the element. Check out the DOM before and after clicking button the and you'll see that this works properly.

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>

Upvotes: 1

Related Questions