Wait For CSS Animations and Transitions

Benefits

• Easily wait for an element's css transition to end using JavaScript
• Allows you to keep your transition/animation css properties separate from your JS
• Native javascript with no bloated dependencies
• Safer and more reliable than transitionstart and transitionend events
• Plays nicely with the latest specifications

Usage

waitForElementTransition()

Let's say you have the problem (that many of us have) where you need to wait for the completion of your element's CSS transition before your code continues. Given the following CSS...

.animate {
    transition-property: background-color;
    transition-duration: 100ms;
    transition-timing-function: ease-out;
}

You can call the waitForElementTransition method to wait until the element finishes its css transition before doing other things in your javascript code. Like so:

// ES6 import
import { waitForElementTransition } from 'wait-for-element-css';

// OR use dist file
<script type="text/javascript" src="/dist/wait-for-element-transition.min.js"></script>

let element = document.querySelector('div');
element.classList.add('animate'); // start transition
waitForElementTransition(element).then(() => {
    // 100 milliseconds later...
    console.log('transition complete!');
});

If the element has already transitioned before the waitForElementTransition() is called, the waitForElementTransition()s promise will resolve immediately. So you can always guarantee that your code will run, just as it would synchronously.