I think it would be helpful to allow for a developer to “wait” until an Element has fully transitioned after having its CSS transition property changed before continuing JS operations. So given the following html…
<html>
<style>
#my-element {
transition: transform 320ms ease;
transform: translateX(-100vw);
/* more styles here.... */
}
#my-element.show {
transform: translateX(0);
}
</style>
<body>
<div id="my-element"></div>
</body>
</html>
We could wait for the element to finish its transition after adding the show css class to my-element in JS. Some ideas I have off-hand would be to:
Option 1
Update the add(), remove(), and toggle() methods of the Element.classList API to return promises whenever a new class is applied. The promise could resolve when the element has fully transitioned. But not sure if this is the best idea given that those are actually methods on the DOMTokenList interface and this feature wouldn’t be useful to other things that use it
let el = document.body.getElementById('my-element');
el.classList.add('show').then(() => {
//.. the el has fully transitioned!
});
Option 2
Add a new wait method to the Element interface
let el = document.body.getElementById('my-element');
el.classList.add('show')
el.waitForElementTransition().then(() => {
//.. the el has fully transitioned!
});
Option 3
Maybe even incorporate the adding or removal of a css class into the new method:
let el = document.body.getElementById('my-element');
el.addCssClassAndWaitForTransition('show').then(() => {
//.. the el has fully transitioned!
});
But then we would have to have to introduce another method to remove the class also. The first parameter could also accept a style object or similar in case css style properties want to be used instead of a css class.
Option 4
Add a new Element.transition() method (similar to the animate() method in the Web Animations API) that accepts a css class and returns an Animation object.
let el = document.body.getElementById('my-element');
el.transition('show').finished.then(() => {
//.. the el has fully transitioned!
});
I kinda of feel like there might be more options or an easier way to better integrate this into our existing APIs, though.
Would love any feedback on whether or not this would a good feature to add to the spec and possibly any recommendations on approach. Thanks in advance
EDIT: Added another option
