Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom Transition Component triggering ignoring done() inside leave hook #4702

Closed
smyth64 opened this issue Jan 12, 2017 · 6 comments
Closed

Custom Transition Component triggering ignoring done() inside leave hook #4702

smyth64 opened this issue Jan 12, 2017 · 6 comments
Labels
bug

Comments

@smyth64
Copy link

smyth64 commented Jan 12, 2017

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
Copy link
Author

smyth64 commented Jan 12, 2017

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
Copy link
Author

smyth64 commented Jan 12, 2017

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
Copy link

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
Copy link
Member

posva commented Jan 16, 2017

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
Copy link
Author

smyth64 commented Jan 16, 2017

@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
Copy link
Member

posva commented Jan 16, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @posva @smyth64 @websmurf