Execute Codes Until An Element’s Transition Has Ended – waitForElementTransition

Preview:

Description:

A JavaScript library that provides a ‘Wait For Element Transition’ function to delay the excitation of your JavaScript codes until the CSS transition effect on an element has ended.

Similar to the transitionend event but more flexible.

How to use it:

1. Install the package with NPM.

# NPM
$ npm i wait-for-element-transition --save

2. Import the waitForElementTransition component.

import waitForElementTransition from 'wait-for-element-transition';

3. Or from a CDN.

import waitForElementTransition from 'https://cdn.jsdelivr.net/npm/wait-for-element-transition/dist/wait-for-element-transition.js';

4. Apply the waitForElementTransition to the target element which has a CSS transition effect. It returns a promise object where you can execute JavaScript codes after the transition ends.

waitForElementTransition(element).then(() => {
  alert('The transition effect is ended.');
});

Changelog:

v3.3.1 (07/06/2022)

• Package update