Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Do a CSS transition and resolve promise when complete
const transitionToPromise = (el, property, value) =>
new Promise(resolve => {
el.style[property] = value;
const transitionEnded = e => {
if (e.propertyName !== property) return;
el.removeEventListener('transitionend', transitionEnded);
resolve();
}
el.addEventListener('transitionend', transitionEnded);
});
/*
CSS rule:
#main-nav {
opacity: 0;
transition: opacity 1s;
}
*/
// Usage
const mainNav = document.getElementById('main-nav');
function es2015() {
transitionToPromise(mainNav, 'opacity', '1')
.then(() => alert('Transition done'));
}
async function es2016() {
await transitionToPromise(mainNav, 'opacity', '1');
alert('Transition done');
}
@gernotpokorny

This comment has been minimized.

Copy link

gernotpokorny commented Jul 11, 2018

very nice! Thank you.

@Pushplaybang

This comment has been minimized.

Copy link

Pushplaybang commented Aug 21, 2018

rad.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.