Subscribe on changes!

Transition props enter-from-class, leave-from-class etc use same resolver as the class attribute

avatar
May 3rd 2023

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.

avatar
May 3rd 2023

Is it possible to use this .join(' ')?

avatar
May 3rd 2023

Is it possible to use this .join(' ')?

For a simple string[], yes, but not with objects no