CODEWITHSUNDEEP
javascriptcssvue.js
mozi
mozi

Reputation: 147

How to run functions after css animation ends

I use vue3. I made it bigger when I put the mouse on the box.

.curl:hover {
 width: 200px;
 height: 200px;
}

I would like to inform user that the animation is over after the size has grown.

In other words, Like animate() in jquery, I want to run function() indicating that the animation is finished. after the animation ends.

Does css or vue have this feature without jquery?

Upvotes: 0

Views: 4549

Answers (1)

StarshipladDev
StarshipladDev

Reputation: 1145

I looked into this tutorial to answer your query below.

Basically, you need to specify a type of JavaScript handler, animationend, using an eventhandler add function, passing the method you wish to run in as the second argument, and setting the element you are animating as the element to add the event to.

I have commented in the code the parts that are relevant

//Set a reference to the animated element
const animated = document.getElementById("divBoii");

//Add animation event listener, with attached function.
animated.addEventListener('animationend', () => {
  console.log('Animation ended');
  document.getElementById("alert").innerHTML=":)";
});
<head>
  <style>
  /*Animation that is assigned to animated div */
  @keyframes animation{
    0%{
      padding:5%;
      height:auto;
    }
    100%{
      padding:10%;
      height:auto;
    }
  }
  body{
    width:100%;
    height:100%;
    background-color:teal;
  }
  #divBoii{
    margin:40%;
    margin-top:10%;
    width:10%;
    padding:5%;
    background-color:green;
  }
  /*Assign animation to div*/
  #divBoii:hover {
    animation-name:animation;
    animation-duration:3s;
  }
  
  </style>
  <body><div id="alert">
        This will be a smiley face when animation ends
      </div>
      <div id="divBoii">
      Here is some content we are going to animate
      </div>
  
  </body>
</head>

Upvotes: 1

Related Questions