Vue: Suggestion:directly declared enter class and leave class in transition definition

[bluedarker]

when using other lib like animate.css, can't integration easy with Vue.

expect this

<div v-show="showFlag" transition="transitionId:transitionEnter,transitionLeave">

for integration with animate.css

<div v-show="showFlag" transition="transitionId:bounceInRight,bounceOutRight">

[yyx990803]

Sounds like a useful option...

How about we define it in a transition object:

Vue.transition('bounce', {
  enterClass: 'bounceInRight',
  leaveClass: 'bounceOutRight'
})

<div v-show="showFlag" transition="bounce">

[bluedarker]

Of course, but use a little complicated.

[yyx990803]

Alternatively:

<div v-show="showFlag" :transition="{ enterClass: 'bounceInRight', leaveClass: 'bounceOutRight' }">

[bluedarker]

Great, enough for me. but how provide js hook?

[yyx990803]

<div v-show="showFlag" :transition="{
  name: 'bounce',
  enterClass: 'bounceInRight',
  leaveClass: 'bounceOutRight'
}">

You can define enterClass and leaveClass either inline, or in the JavaScript definition.

[dsonet]

How about enterClass and leaveClass can also pass as function, since some times need random transitions or any other needs custom logic situation. @yyx990803

[OEvgeny]

@dsonet computed variables probably should work.

[dsonet]

@OEvgeny Thanks for your reply, I didn't try the way you mentioned yet, but it seems has to be inline. What I want is also can do that with Vue.transition to make it reusable.

[ediamin]

@yyx990803 Do you have any plan to make enterClass and leaveClass dynamic? For example, in a carousel, a slide may slide from both left and right. If I assign a vue transition to a slide, its enter and leave classes will be unchangeable. It will slide from either left OR right. But in this case, we need to assign dynamic classes.

By the way, thanks for the great work!

[Skhmt]

Will this be implemented in 2.0.0? I see it works in 1.0.14 and up, but not in 2.0.0 alpha.

[yyx990803]

This is supported in 1.0.14+ and 2.0 (as props to <transition>)