Exit animation jumps when using Vue <group-transitions>

[rolfo85]

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!

[guanzo]

Will investigate after work, thanks for making an issue.

[guanzo]

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

[rolfo85]

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!

[rolfo85]

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

[guanzo]

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

[chasegiunta]

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

[guanzo]

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.

[chasegiunta]

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

[chasegiunta]

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.

[hyvyys]

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.