Smooth transition due to contents changing

[tettoffensive]

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.

[guanzo]

Could you provide a reproduction with a jsfiddle?

[tettoffensive]

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.

[guanzo]

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.

[tettoffensive]

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.

[lon9man]

@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!