Proposal: `addClassTransition` and `removeClassTransition`

[davej]

I like to keep CSS transitions in CSS rather than javascript and handle the transitions by adding/removing classes instead. Would a PR for this feature be accepted?

Usage Example:

$('#transition-demo')._.addClassTransition('active')
  .then($.remove)
  .then(element => alert('Removed! Inspect the DOM to verify :)'));

[LeaVerou]

The problem is that by toggling a class there might be different transitions that finish at different times, so which transitionend event does one listen to?

FWIW, you can use $('#transition-demo').classList.add('active') to add a class and then listen for the transitionend event you need, but I agree it's a bit clumsy. I wonder what kind of primitives should we add to Bliss to make this use case smoother.

[davej]

The problem is that by toggling a class there might be different transitions that finish at different times, so which transitionend event does one listen to?

I guess the first one (like with $.transition). I believe you would have the same problem if you called $.transition multiple times on the same element with different durations, i.e. all promises will resolve on the first transitionend event for that element.

FWIW, you can use $('#transition-demo').classList.add('active') to add a class and then listen for the transitionend event you need

Yup, that's what I'm doing currently. :-)

Anyway feel free to close this issue if you think it's a non-starter, I agree that listening to the transitionend event isn't a huge amount of overhead.

[thany]

Would it be possible to automatically figure out the longest-lasting (or shortest, or average) of multiple transitions, and wait for that until the addClassTransition promise resolves? It's probably a bit of a challenge if there are transitions on other elements that are triggered by the supplied class.