useTransition: Tweak ideas from usage

[weaverryan]

Hi!

I was just playing with the latest useTransition on 0.24 beta - it's working beautifully! I had a few notes/ideas from a usability perspective:

1. The tripped over myself a bunch getting the option & class names right. For my example (not tailwind), I was using:

useTransition(this, {
    enter: 'transition-fade-enter',
    enterActive: 'transition-fade-enter-active',
    enterTo: 'transition-fade-enter-to',
    leave: 'transition-fade-leave',
    leaveActive: 'transition-fade-leave-active',
    leaveTo: 'transition-fade-leave-to',
});

I'd like to propose 2 changes: (a) we (in the docs) show enterActive and leaveActive first. That's the class that establishes the transition duration and it feels logically like we should always show it first. And (b) I'd like to rename enter to enterFrom. Vue just changed from using v-enter in Vue 2 to v-enter-from in Vue 3. Having a enterTo and enterFrom helps identify that these are the two classes you use to apply your styles from one state to the other (e.g. opacity 0 to opacity 1).

My example would then look like:

useTransition(this, {
    enterActive: 'transition-fade-enter-active',
    enterFrom: 'transition-fade-enter-from',
    enterTo: 'transition-fade-enter-to',
    leaveActive: 'transition-fade-leave-active',
    leaveFrom: 'transition-fade-leave-from',
    leaveTo: 'transition-fade-leave-to',
});

2. A console.log() snuck into the code ;) - https://github.com/stimulus-use/stimulus-use/blob/master/src/use-transition/use-transition.ts#L79

That's all! Thank you!

[adrienpoly]

v0.24-0-1 has those suggestions
thanks I wasn't aware of the Vue3 changes

[weaverryan]

Amazing! Thank you!