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

Closed
zhenyong opened this Issue Dec 22, 2016 · 6 comments

Projects

None yet

4 participants

@zhenyong
zhenyong commented Dec 22, 2016 edited

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:

  1. 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

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

Increase version, unexpected again:

  1. vue-router@2.1.1 + vue@2.0.0-rc.5 (resuable transition) 👎
    Unexpected: https://jsfiddle.net/feipigzi/uqotvzft/1
@zhenyong zhenyong changed the title from Reusable Transitions break in vue@2.1.6 (last one). Can reproduce. to Reusable transitions with vue-router break in vue@2.1.6 (last one). Can reproduce. Dec 22, 2016
@posva
Member
posva commented Dec 22, 2016

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

@zhenyong
zhenyong commented Dec 22, 2016 edited

@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
Member
posva commented Dec 22, 2016

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
image

2: forward
image

3: back
image

@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 :)

@yyx990803 yyx990803 closed this in 2540c37 Dec 27, 2016
@zuibunan

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment