Skip to content

Instantly share code, notes, and snippets.

@davej
Last active January 31, 2023 15:49
Show Gist options
  • Save davej/44e3bbec414ed4665220 to your computer and use it in GitHub Desktop.
Save davej/44e3bbec414ed4665220 to your computer and use it in GitHub Desktop.
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');
}
@Pushplaybang
Copy link

rad.

@peckomingo
Copy link

Very useful! Thanks!

@scsskid
Copy link

scsskid commented May 27, 2021

very good

@goncaloferreira92
Copy link

Saved my life big time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment