Easily animate changes in css with the
In the firs example, only the
justify-content value changes in css. Only a prop
layout is neccessary for the smooth animation of the switch-handle.
One change in the syntax is necessary, if you compare to the React original of this example: The
Motion component is outside of the outer
div. The Svelte and React update orders are a bit different, if the
Motion component was inside the outer
div, it would not be informed in time about the change.
Optional update parameter
A difference between React and Svelte is that a prop change triggers all child components to re-render in React, while only directly affected components change in Svelte. If you need to inform a
Motion component with the
layout prop about a change, you can supply the prop
update. The value is not important, when it changes the
Motion component will remeasure its target.
AnimateSharedLayout is a component, that coordinates the behavior of several
Motion components with the
layout prop. When a
layout-descendant of it changes, the
AnimateSharedLayout notifies all of the descendants, so that the complete layout animates smoothly.
Here is also a REPL, demonstrating that the
layout prop also plays very well with Sveltes stock transitions.
Child elements might be affected by the animation of one of its parents. If that effect is not wanted, you can wrap the child with a
Motion component and set
layout-prop to true. Apparently, there is an interferring bug with scroll:
When two targets of a
layoutId are different, you can set the
type property of the
AnimateSharedLayout component to “crossfade”. Svelte motion tries to gently fade over from one presence to the next. Click on a dot in the example below and see how the border of the opening menu smoothly appears an disappears on exit.
Also in this example, you can see how easy you can animat reordering of css grids. Simply Wrap the grid in both a
AnimateSharedLayout component and a
Motion component and also wrap all grid items in a
Motion component. Don’t forget the
layout prop on every
Motion. The data about most eponymous mathematicians is from wikidata.