Executing functions after the completion of a CSS animation

Question

Executing functions after the completion of a CSS animation

I am currently utilizing Vue3. I have implemented a feature where the box grows in size when the mouse hovers over it.

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

I am looking for a way to notify the user once the animation is complete and the size has been adjusted.

In simpler terms, similar to the animate() function in jQuery, I am seeking a method to execute a function upon completion of the animation without relying on jQuery. Does CSS or Vue offer a built-in solution for this?

javascript css vue.js

Answer 1

Answer №1

After conducting research, I found a helpful tutorial that addresses your question.

Essentially, to achieve the desired outcome, you must specify a JavaScript handler type, animationend, by utilizing an eventhandler add function. This function requires the method you want to execute as the second argument, while also indicating the element undergoing animation as the target for the event.

Key components have been annotated within the code

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

//Include animation event listener along with associated function
animated.addEventListener('animationend', () => {
  console.log('Animation ended');
  document.getElementById("alert").innerHTML=":)";
});

<head>
  <style>
  /*Animation 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>

Answer 2

After conducting research, I found a helpful tutorial that addresses your question.

Essentially, to achieve the desired outcome, you must specify a JavaScript handler type, animationend, by utilizing an eventhandler add function. This function requires the method you want to execute as the second argument, while also indicating the element undergoing animation as the target for the event.

Key components have been annotated within the code

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

//Include animation event listener along with associated function
animated.addEventListener('animationend', () => {
  console.log('Animation ended');
  document.getElementById("alert").innerHTML=":)";
});

<head>
  <style>
  /*Animation 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>

Executing functions after the completion of a CSS animation

Answer №1

Similar questions

Learn how to create a dynamic React.useState function that allows for an unlimited number of input types sourced from a content management system

Having trouble retrieving input field values with Angular.js

Is it possible for one AngularJS application to influence another?

Attempting to trigger an action from a Vuex module proves futile as the error message "[vuex] unknown action type" is generated

The xmlhttp object parameter is not defined. JavaScript AJAX

Utilize the scope for promise .then() functions when calling a service

Is it possible to change sidebars in a spreadsheet if you are not a member of Google Workplace?

How to Align <ul> to the Right in Bootstrap 4

Authentication Error (401) in WordPress JWT

Extension for Chrome browser

Align the subtext to the right and center it vertically within a Bootstrap dropdown menu item

I'm looking to locate the API documentation for AngularJS TypeScript

After making a POST request, I must ensure that the page is rendered accordingly

Pressing ctrl+s will submit TinyMCE+JEditable

Lost: pointer for speech bubble

dissecting mongo queries using nodes

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

Deploy a Next JS website within a subdirectory using traefik

Error: The property 'rows' cannot be read because it is undefined

Tips for resolving undefined error handling in node.js