Breaking News: Grepper is joining You.com. Read the official announcement!

animate.css with js

Glenn Hefley answered on September 13, 2022 Popularity 6/10 Helpfulness 1/10

answer animate.css with js

related animate.css with js

animate.css with js

Comment

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: animate.style

Tags: animate.css javascript

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Glenn Hefley

0 Answers Avg Quality 2/10

Closely Related Answers

animate.css with js

Comment

const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: animate.style

Tags: javascript animate.css

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Glenn Hefley

0 Answers Avg Quality 2/10

animate.css with js

Comment

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: animate.style

Tags: javascript animate.css

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Glenn Hefley

0 Answers Avg Quality 2/10

animate.css with js

Comment

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

Popularity 5/10 Helpfulness 1/10 Language whatever

Source: animate.style

Tags: whatever animate.css

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Glenn Hefley

0 Answers Avg Quality 2/10

animate.css with js

Contents

More Related Answers

animate.css with js

Closely Related Answers

animate.css with js

animate.css with js

animate.css with js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.