Transition enter is not working in a specific (and strange) scenario

[adrianolobo]

Version

2.3.0

Reproduction link

http://jsfiddle.net/Lv0w5ybr/

Steps to reproduce

• Open the Jsfiddle
• Watch after 1 sec the numbers not animating when entering
• Click "Add" and see that the numbers are not being animated

What is expected?

• Now open this other JSFiddle: http://jsfiddle.net/d51beego/
• Watch after 1 sec the numbers are being animated correctly
• Click "Add" and see that the numbers are being animated correctly

What is actually happening?

The difference between those JSFiddle is just a console.log(this.hPos) at the line 14.
For some reason, mixing this console.log(this.hPos); with the this.hPos = 'left'; makes the class 'animation-enter-to' not be removed and the enter animation not be fired.

---

I'm sorry If I don't have any additional info, I'm stuck with this error for 8 hours and I can't understand why a console.log could bug the animation.

[adrianwang]

I guess this related to Vue rendering mechanism. If you console.log(this); instead of console.log(this.hPos);, you can clearly see that even you put the console.log before change this.hPos's value, on Vue instance this.hPos has already changed to left.

[adrianolobo]

I made a temporary fix by wrapping the content of getPosition with setTimeout(()=>{}, 0);. This 0ms delay solves the problem somehow. As you can see here: http://jsfiddle.net/Lnz3bn1s/1/
If I remove the .animation-move class the problem disapears too.
The console.log(this.hPos) was just an exemplo, if you test the variable with if(this.hPos) {...} it happens too.

[jkzing]

I suppose this shouldn't be like that.

Did a little digging into it. It's because that accessing this.hPos will cause a re-render, and during that rendering, function that remove enter-to class is fired before enter-to class added.

I'll try to find a way get it fixed.

[jkzing]

BTW, if you try to get work around it, wrap getPosition in this.$nextTick is a better idea.

[posva]

Closing as dup of #5800