Vue: Custom Transition Component triggering ignoring done() inside leave hook

[smyth64]

Vue.js version

2.1.8

Reproduction Link

http://codepen.io/schmidigital/pen/oBxqNM

Steps to reproduce

Click on "Section 1"
Inside the console we see:

before enter
enter
after enter

Pressing Button "Section 2"

before leave
leave
before enter
after leave
enter
after enter

The "Section 1" Content is leaving instantly, whereas "Section 2" is fading in.

Pressing Button "Section 1"

before enter
enter
before leave
after enter
after leave

The "Content 2" section now is fading out whereas "Content 1" is fading in.

As we can see the hooks are also triggered in a different order.

What is Expected?

The Sections should fadein/fadeout same as from "Section 2" to "Section 1" instead of disappearing immediatly as seen from "Section 1" to "Section 2"

What is actually happening?

Depending on the order of the elements, they are animated differently.
If you put

slide-transition
  div(v-if="activeSection == 1") Section 1!    
slide-transition
  div(v-if="activeSection == 2") Section 2!   

in this order

slide-transition
  div(v-if="activeSection == 1") Section 1!    
slide-transition
  div(v-if="activeSection == 2") Section 2!   

Then the problem is vice versa!

[smyth64]

I also thought about building a custom transition-group into a component.

The reason for this is:
I want to take the key of each section and calculate if they fade up into the upper direction or the lower direction based on the previous and active section.

[smyth64]

Here is a fork which is working.

http://codepen.io/schmidigital/pen/rjeRqv

It works but I have to provide the id via html5 "data-..".

I'm really interested why the first example doesn't work!

[websmurf]

Following updates in regards to this issue as I'm having exactly the same issue on a custom javascript animation, both enter and leave events seem to be triggered at the same time (as with your first codepen)

[posva]

A working version: http://codepen.io/posva/pen/YNGBNp?editors=1011
I'm sot sure if it's a bug, that's why I didn't add any labels

[smyth64]

@posva
That's the same like in my 2. example
http://codepen.io/schmidigital/pen/rjeRqv

If you put the blocks into one transition element, then it works.
It's really weird because normally we have to use transition-group for multiple elements otherwise we get a warning.

[posva]

@smith64fx You're right, I skipped that comment, sorry 😁