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');
}
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.