List Transitions & flip

Keyed lists

<transition> also works on items inside a keyed <for> — as items are added or removed, each plays its in/out. Keying (key="...") is what lets olum tell which item left vs. which stayed, so the transitions land on the right elements:

<for each="todo of state.todos" key="todo.id">
  <transition in="fly({ y: 20 })" out="fade">
    <li>{todo.text}</li>
  </transition>
</for>

flip — animate items to their new position

Add a flip attribute and, when a keyed reorder moves an item, olum measures where it was and where it lands and slides it there (the "FLIP" technique). It composes with in/out on the same wrapper. flip needs a keyed <for> — that's how items keep their identity across the reorder.

<for each="todo of state.todos" key="todo.id">
  <transition flip="{ duration: 300, easing: 'quintOut' }">
    <li>{todo.text}</li>
  </transition>
</for>

flip takes duration, delay, and easing (a name string). Bare <transition flip> uses the defaults.