a-transition
Animates children using FLIP whenever their layout changes (reorder, add, remove).
Wraps slotted children and plays smooth FLIP animations whenever they reorder, are added, or are removed.
Item 1
Item 2
Item 3
Item 4
Usage
<a-transition animate-enter animate-exit>
<div data-key="1">Item 1</div>
<div data-key="2">Item 2</div>
</a-transition>Use data-key on children so the element can track identity across DOM mutations. Without it, element identity falls back to object reference, which breaks move detection after a re-render.
Control timing via CSS:
a-transition {
transition-duration: 350ms;
transition-timing-function: ease-in-out;
}FlipLayoutElement
A flip-layout element animates its slotted children using the FLIP technique whenever their layout changes (reorder, add, remove, resize).
Attributes
| Name | Type | Default value | Description |
|---|
Events
| Name | Description |
|---|---|
flip-start
|
Dispatched before the FLIP animation begins. |
flip-end
|
Dispatched after all FLIP animations complete. |