Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Do a CSS transition and resolve promise when complete
const transitionToPromise = (el, property, value) =>
new Promise(resolve => {[property] = value;
const transitionEnded = e => {
if (e.propertyName !== property) return;
el.removeEventListener('transitionend', transitionEnded);
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.