search

guanzo / vue-smooth-reflow

Transition an elements reflow when the data changes.
MIT License
450 stars 18 forks source link

Exit animation jumps when using Vue <group-transitions> #14

Open rolfo85 opened 5 years ago

rolfo85 commented 5 years ago

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 commented 5 years ago

Will investigate after work, thanks for making an issue.

guanzo commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

guanzo commented 5 years ago

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

chasegiunta commented 5 years ago

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

guanzo commented 5 years ago

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 commented 5 years ago

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

chasegiunta commented 5 years ago

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 commented 5 years ago

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.