Reusable transitions with vue-router break in vue@2.1.6 (last one). Can reproduce.

[zhenyong]

My initial purpose is to make transition in vue-router/examples/transitions reusable.

Before change codes, transition works as a's expected:

1. vue-router@2.1.1 + vue@2.1.6 👍
   Expected https://jsfiddle.net/feipigzi/uqotvzft/3/

Click /parent and /parent/foo , make slide left or right transition.

After make resuable, unexpected:

2. vue-router@2.1.1 + vue@2.1.6 (resuable transition) 👎
   Unexpected: https://jsfiddle.net/feipigzi/uqotvzft/

And I try to use older version vue.js, work as expected

3. vue-router@2.1.1 + vue@2.0.0-rc.4 (resuable transition) 👍
   Expected: https://jsfiddle.net/feipigzi/uqotvzft/2/

Increase version, unexpected again:

4. vue-router@2.1.1 + vue@2.0.0-rc.5 (resuable transition) 👎
   Unexpected: https://jsfiddle.net/feipigzi/uqotvzft/1

[posva]

I don't see the issue. 1 and 2 yields the same result
Can you give use more details please?

[zhenyong]

@posva
Slow down transition, click /parent then click /parent/foo, different dom class

1. https://jsfiddle.net/feipigzi/uqotvzft/3/
   

2. https://jsfiddle.net/feipigzi/uqotvzft/
   

[posva]

ooh, one transition goes to the right instead of the left

[zuibunan]

I have a similar problem
vue2.1.7
vue-router2.1.1
vuex 2.1.1

app.vue

...
<keep-alive>
   <router-view ></router-view>
</keep-alive>
...

pageA.vue

<container ...>
</container>

component container.vue

  <transition @after-enter="onViewIn(0)" @after-leave="onViewOut(0)" :name="theTransitionName">
    <div class="container" :transition-name="theTransitionName">
      <slot></slot>
    </div>
  </transition>

transition component seems slow down one step when i use keep-alive and put transition component in each route view

this is my spa transition snapshots

1: first load

2: forward

3: back

[TiBianMod]

With vue@2.1.6+ I have also problems with the transitions.

Note: I'm using only Vue

<transition
        enter-active-class="transitionEnter"
        leave-active-class="transitionLeave"
>
    <div v-show="show">
        <slot></slot>
    </div>
</transition>

First I see the empty component and after start the transition,
is like the directive v-show is not working.

I hope this will be fixed in next version :)

[zuibunan]

My problem remains even though upgrade to 2.1.8, maybe I should provide a demo
#4545 (comment)