Layout Animations
Mercury supports layout animations, allowing elements to animate their position, size, and layout changes seamlessly.
To use it you must mark elements subjective to layout change with the layout
attribute.
<div class="flex {justify}" use:mercury layout>
<div
class="box"
use:mercury
onclick={() => (justify = 'justify-end')}
layout
></div>
</div>
Layout IDs
By assigning the same layout value to different elements, you can create connections between them for smooth transitions.
<div layout="uniqueId"></div>
Example
In this example, Mercury animates the element when its layout changes (e.g., when the layoutState changes).
<script>
let layoutState = 'justify-start';
</script>
<div class="flex {layoutState}" use:mercury layout>
<div
class="box"
use:mercury
onclick={() => (layoutState = 'justify-end')}
layout="sharedId"
></div>
</div>