-
Notifications
You must be signed in to change notification settings - Fork 5
/
waitForTransitionEnd.ts
33 lines (33 loc) · 1.14 KB
/
waitForTransitionEnd.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
* returns a promise which resolves after the `transitionend` event
*
* @example
* ```
* menu.classList.add("open");
* await waitForTransitionEnd(menu, "transform");
* input.classList.add("visible");
* await waitForTransitionEnd(input, "opacity");
* input.focus();
* ```
*
* @param {HTMLElement|SVGElement} el - DOM Element which has the css transition
* @param {string} [propertyName] - transition's propertyName. e.g. "width"
* @returns {Promise}
* @async
*/
export function waitForTransitionEnd(el: HTMLElement, propertyName?: string): Promise<TransitionEvent> {
return new Promise((resolve, _reject) => {
el.addEventListener<'transitionend'>('transitionend', function callBack(e: TransitionEvent) {
// ignore child transitions
if (e.target !== el) return;
// if propertyName is given then ignore trasnition on other properties
if (propertyName && e.propertyName !== propertyName) {
return;
}
// unbind the event listener
el.removeEventListener('transitionend', callBack);
// resolve promise with the transitionend event as its argument
resolve(e);
});
});
}