Vue smooth reflow
When a change in data causes a reflow, vue smooth reflow (VSR) will transition it for you.
Why? Because reflows are ugly, and motion is beautiful.
VSR will transition 3 CSS properties: height, width, and transform.
Don't hack your CSS just to transition height: auto. Let dynamic content fill the DOM, and VSR will handle the rest.
Check out each property, toggle VSR off and on, and see what vue smooth reflow does for you.
As elements are added and removed from the DOM, height is the most common property that is affected by the reflow.
VSR will transition it for you by default.
Zero configuration.
Look at this.
Transitions on other properties
will be preserved.
Interrupted transitions
are no problem.
Conditional rendering and vue transitions on nested elements.
The height transition will occur after the nested transition finishes.
v-if.
v-show.
Transition mode "out-in".
Lists.
Overflow.
Two overflow problems can occur during the transition.
1. Appended elements can
overflow their container.