Exit animation jumps when using Vue <group-transitions>

Question

Exit animation jumps when using Vue <group-transitions>

rolfo85 opened this issue 6 years ago · comments

Hello,

I've been looking for something like this plugin for a very long time. It is absolutely amazing!!! please keep supporting it.

However I encountered a couple of issues.

Using group-transitions with a simple fade effect to show the content, the outer container animates its height properly when the content is entering, but when it fades away, the outer container starts animating properly but then it suddenly stops and jumps all the way to height 0 with no transition.

I created a sandbox that replicates the bug.
https://codesandbox.io/s/ry50n8vwnn

Another note:
The plugin seems not working when used together with animate.css within Vue transitions.
But that is another bug I guess, so eventually I will open another issue.

Thanks!

Eric Guan · Answer 1 · Fri Dec 07 2018 04:49:27 GMT+0800 (China Standard Time)

Will investigate after work, thanks for making an issue.

Eric Guan · Answer 2 · Fri Dec 07 2018 11:01:54 GMT+0800 (China Standard Time)

Can I ask why you're using a <transition-group> for elements that transition out at the same time? Why not just use <transition>? Like this: https://codesandbox.io/s/82j698xpx0

Rodolfo · Answer 3 · Fri Dec 07 2018 16:05:08 GMT+0800 (China Standard Time)

Hey,

Yes you're right. In that case it doesn't make sense using transition group. I updated my example with a for loop where you are supposed to use the transition-group.

https://codesandbox.io/s/ry50n8vwnn

It's not the case now, but I'm planning to use this plugin for a large project and I was trying to test it in all the conditions to have an idea of what I'm going to face. But again, it's amazing man!

Rodolfo · Answer 4 · Fri Dec 14 2018 02:18:29 GMT+0800 (China Standard Time)

did you have any chance to fix it with group-transitions?

Eric Guan · Answer 5 · Fri Dec 14 2018 14:29:32 GMT+0800 (China Standard Time)

It's on my todo list. Will get around to it!

Chase Giunta · Answer 6 · Tue Jan 22 2019 06:18:39 GMT+0800 (China Standard Time)

Running into this today! Is this not already present on the demo page? Or is this a different issue?

Eric Guan · Answer 7 · Tue Jan 22 2019 06:22:39 GMT+0800 (China Standard Time)

Which browser is that gif from?

This is a different issue, and one that should already be working normally, unless you're using a minority browser.

Chase Giunta · Answer 8 · Tue Jan 22 2019 06:40:05 GMT+0800 (China Standard Time)

@guanzo Latest Chrome, I think (71.0.3578.98) . Also happens on Safari (Mac - Version 12.0.2)

Chase Giunta · Answer 9 · Tue Jan 22 2019 06:48:00 GMT+0800 (China Standard Time)

Hmm, that issue in the .gif might be a mounting issue / race condition (separate issue). If I toggle VSR off and back on again, or even toggle dev tools, it works as expected.

Adam Jagosz · Answer 10 · Fri Sep 27 2019 03:48:26 GMT+0800 (China Standard Time)

https://recordit.co/8b6msaALDa

I've got a problem here using nested SmoothReflow components. It appears that the initial height for the transition is calculated incorrectly, it is too small when height is growing and too great when height is shrinking.

https://recordit.co/BF06xbOCso In this video, I removed all the transition-groups, and the smooth reflow stopped working, it only starts working after I remove some items from the second panel, and it still only works for adding items.