Transitions

npm i olum-transition

Animate an element as it enters or leaves. Wrap it in a <transition> tag — a compiler-known wrapper (like <if>/<show>/<for>) that stamps its single element child and plays the animation. The intro runs when the element enters (an <if> adds it); the element's removal is deferred so the outro can play before it's gone.

<if when="state.visible">
  <transition transition="fade">
    <p>Fades in and out</p>
  </transition>
</if>

Attributes

• transition="fn(params)" — same animation for enter and leave.
• in="fn(params)" — only when entering.
• out="fn(params)" — only when leaving.

params is a normal object evaluated at render time (so it can read state or a <for> loop variable):

<transition in="fly({ y: 200, duration: 2000 })" out="fade">…</transition>

<transition> wraps one element — that element is what animates (there's no extra wrapper node in the output). If it's dropped and re-added before its outro finishes, the outro is cancelled and it eases back in.

Where to go next

• Built-in transitions — fade, fly, scale, slide, draw, and the easing set.
• Custom CSS transitions — write your own (node, params) function returning css(t, u).
• Custom JS transitions — the tick(t, u) variant for effects styles can't express.
• Transition events — onintrostart and friends.
• List transitions & flip — enter/leave in a keyed <for>, and sliding items to their new position.
• Crossfade — fly an element between two places.

Notes

• Transitions animate with requestAnimationFrame, so they pause in a background tab and resume when it's visible again — normal browser behavior.
• Enter/leave for a single element toggled by <if>/<show> (v1), plus keyed-list enter/leave, flip, and crossfade (v2), are all supported.