vue-smooth-reflow icon indicating copy to clipboard operation
vue-smooth-reflow copied to clipboard

Published 20 hours ago • verified publisher icon guanzo

Smooth transition due to contents changing

Open tettoffensive opened this issue 6 years ago • 5 comments

I have a component that is basically a div with a bunch of headings and texts and buttons and forms and other things inside. The content is dynamic and changes when the user taps a button. The component remains the same, but the model changes.

This causes the height of the component to change. I was hoping vue-smooth-reflow would animate this height change, but I'm guessing it only does so when you explicitly set the height property in css?

Is there anyway to auto-trigger these smooth reflows? I initially thought this was the intention, but when I tried it, it didn't work for me.

tettoffensive avatar Aug 20 '19 23:08 tettoffensive

Could you provide a reproduction with a jsfiddle?

guanzo avatar Aug 21 '19 03:08 guanzo

I've provided a repro here on codesandbox.io.

Ignore the error (this.$smoothReflow is not a function). I can't figure out why both codesandbox and jsfiddle give me that even though I have it imported. I don't get that error in my project.

But you can see how when you click next and previous the size of the '.guide' changes because the contents change. However, it's not an explicit animation.

tettoffensive avatar Aug 21 '19 17:08 tettoffensive

Why ignore the error? It's telling you what's wrong. The vue option is mixins (plural), not mixin.

The transition works for me after fixing the mixins typo: https://codesandbox.io/s/vue-smooth-reflow-g4tg5?fontsize=14

Also, the intent of vue-smooth-reflow is indeed to automatically transition the height, so you shouldn't need to explicitly set the height property.

guanzo avatar Aug 21 '19 21:08 guanzo

Because I'm not getting that error in my actual project. I was just getting it on codesandbox. I have it spelled "mixins" plural in my actual project and it does not work. Not sure why, if it works in the sandbox. Must investigate. I get no errors at all.

tettoffensive avatar Aug 21 '19 21:08 tettoffensive

@guanzo hello, made example, which smoothly works in Chrome/Safari, BUT works wrong in latest Firefox (as minimum). main idea - i want to animate height of player on change video source. https://codesandbox.io/s/vue-smooth-reflow-animate-height-auto-forked-iw8eoe?file=/src/components/HelloWorld.vue

test flow:

  1. press Next - poster is EMPTY, so height should be smoothly decreased
  2. press Previous - poster is NON-EMPTY, so height should be smoothly increased (as in Chrome/Safari), BUT in Firefox it decreased to ~50px - then it jumps to whole height

please try to reproduce..

thanks!

lon9man avatar Feb 18 '22 15:02 lon9man