Transition

Available transitions

All of these boxes are mounted (mounted=true), so the entry animation has already completed. In practice you toggle mounted to animate in/out.

<Transition transition="fade" mounted>
  <div>fade</div>
</Transition>

<Transition transition="slide-up" mounted>
  <div>slide-up</div>
</Transition>

<Transition transition="scale" mounted>
  <div>scale</div>
</Transition>

<Transition transition="pop" mounted>
  <div>pop</div>
</Transition>

Duration

<Transition transition="fade" mounted duration={100}><div>Fast</div></Transition>
<Transition transition="fade" mounted duration={400}><div>Normal</div></Transition>
<Transition transition="fade" mounted duration={1000}><div>Slow</div></Transition>

Unmounted state

When mounted=false, the element is hidden (exit animation plays). Toggle it from a signal or state to animate in/out.

const [show, setShow] = createSignal(false)

<button onClick={() => setShow(!show())}>Toggle</button>
<Transition transition="scale" mounted={show()}>
  <div>Animated content</div>
</Transition>

Motion tokens

The timingFunction prop accepts any CSS easing value — including motion system tokens. Pass var(--dv-motion-ease-spring) for a physically-based spring feel, or var(--dv-motion-ease-exit) for an element that accelerates away on dismount.

The duration prop takes milliseconds. Map it to a motion token by using the corresponding numeric value, or override the underlying CSS custom property directly via the style prop.

{/* spring easing — physically-based feel */}
<Transition transition="scale" mounted timingFunction="var(--dv-motion-ease-spring)" duration={400}>
  <div>Spring</div>
</Transition>

{/* duration matching motion tokens */}
<Transition transition="slide-up" mounted duration={200}>  {/* --dv-motion-duration-normal */}
  <div>Normal</div>
</Transition>
<Transition transition="slide-up" mounted duration={400}>  {/* --dv-motion-duration-slow */}
  <div>Slow</div>
</Transition>

{/* CSS var override — inherits from :root or a parent's token override */}
<Transition transition="fade" mounted style="--dv-transition-duration: var(--dv-motion-duration-deliberate);">
  <div>Deliberate</div>
</Transition>

Token reference: instant=50ms, fast=100ms, normal=200ms, slow=400ms, deliberate=700ms. See the Motion page for the full vocabulary.