Vue: Transition flickering with 2.1.7

Created on 27 Dec 2016  Â·  6Comments  Â·  Source: vuejs/vue

Related issue was raised by StarpTech in vue-admin yesterday.
Repo example is based on vue-router example...
The workaround is

Add attribute enter-class="fadeIn" into transition

or

Change vue.js back to 2.1.6

Vue.js version

2.1.7

Reproduction Link

http://codepen.io/anon/pen/RozKBz

Steps to reproduce

Switch the view between Foo and Bar by hitting the a links.

What is Expected?

Transition works fluently.

What is actually happening?

View flickers during transition.

regression

Most helpful comment

@sqal I've reverted it to the old behavior and your use case should work as expected in the next release.

All 6 comments

2.1.6 without this problem.

2.1.7 broke transition for me too. Please check these JSFiddles:

2.1.6 - https://jsfiddle.net/sqal/5bwy3fpw/
2.1.7 - https://jsfiddle.net/sqal/5bwy3fpw/1/

Steps to reproduce

  • click fast multiple times on checked radio button.

You can clearly see that ripple effect in 2.1.7 doesn't behave the same as in 2.1.6. The release notes for 2.1.7 says that <transition>should not be affected by this update, but it is. Should I update something in my CSS or JS to fix this problem?

@yyx990803 Is https://github.com/vuejs/vue/commit/89987e8e2ce31c071ea937152dbf967b6213d4ad also supposed to fix my issue? I checked this quickly by editing dist file (vue/dist/vue.runtime.common.js) with your change but same result.

@sqal ah, sorry, it indeed affects <transition> usage. I think I'll have to revert this whole change...

@sqal I've reverted it to the old behavior and your use case should work as expected in the next release.

@yyx990803 Thanks alot for dealing with this issue!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gkiely picture gkiely  Â·  3Comments

finico picture finico  Â·  3Comments

lmnsg picture lmnsg  Â·  3Comments

bdedardel picture bdedardel  Â·  3Comments

aviggngyv picture aviggngyv  Â·  3Comments