Transition props enter-from-class, leave-from-class etc use same resolver as the class attribute
What problem does this feature solve?
The name may be confusing...
If you use a simple class attribute, it gets resolved easily: ['active', {foo: bar.value}]
. With this syntax, you can make things fairly dynamic and make them easy to read in JS
If you use Transition or TransitionGroup, you are forced to use a string type. There is nothing wrong with this, but it makes my JS ugly.
Instead of being able to do this:
const enterClasses = computed(() => [
`carousel-item-${direction.value ? 'next' : 'prev'}`,
`carousel-item-${direction.value ? 'start' : 'end'}`,
])
const leaveClasses = computed(() => [
'active',
`carousel-item-${direction.value ? 'start' : 'end'}`,
])
Which is nice and organized, I am forced to do:
const enterClasses = computed(
() =>
`carousel-item-${direction.value ? 'next' : 'prev'} carousel-item-${
direction.value ? 'start' : 'end'
}`
)
const leaveClasses = computed(() => `active carousel-item-${direction.value ? 'start' : 'end'}`)
Not very appealing.
What does the proposed API look like?
The Transition and TransitionGroup components use the same resolver that the class attributes do for their Custom Transition Classes props.