Pulse · Alpine-style

Transitions

Add kj-transition next to kj-show and the element fades and scales instead of popping. Want full control? Name the classes for each phase.

Modifiers or classes

Bare kj-transition gives a short fade + scale. Tune it with modifiers: .opacity, .scale.90, .duration.400ms, .delay.50ms, .origin.top. Use kj-transition:enter.duration.300ms and kj-transition:leave.duration.150ms to make the two directions differ.

For full control, give classes for each phase — kj-transition:enter, :enter-start, :enter-end and the three :leave equivalents — exactly like Alpine, which also makes Tailwind transition classes work as-is. jsKjs waits for the CSS transition to finish before hiding the element.

Live · Modifier and class-based transitions

kj-transition.scale.90.origin.top.duration.250ms

Six classes, one per phase — Tailwind classes work the same way.

View the source for this demo

HTML

<div kj-data="{ a: true, b: true }" class="grid g2" style="gap:16px">
  <div>
    <button type="button" @click="a = !a" :aria-expanded="a">Toggle (modifiers)</button>
    <div class="tr-panel" kj-show="a" kj-transition.scale.90.origin.top.duration.250ms>
      <code>kj-transition.scale.90.origin.top.duration.250ms</code>
    </div>
  </div>
  <div>
    <button type="button" @click="b = !b" :aria-expanded="b">Toggle (classes)</button>
    <div class="tr-panel" kj-show="b"
      kj-transition:enter="tr-enter" kj-transition:enter-start="tr-from" kj-transition:enter-end="tr-to"
      kj-transition:leave="tr-leave" kj-transition:leave-start="tr-to" kj-transition:leave-end="tr-from">
      Six classes, one per phase — Tailwind classes work the same way.
    </div>
  </div>
</div>

More examples

Tailwind dropdown

HTML

<div kj-show="open"
     kj-transition:enter="transition ease-out duration-200" kj-transition:enter-start="opacity-0 -translate-y-1" kj-transition:enter-end="opacity-100 translate-y-0"
     kj-transition:leave="transition ease-in duration-150" kj-transition:leave-start="opacity-100" kj-transition:leave-end="opacity-0">…</div>

API

kj-show="expr" (.important) · kj-transition[.duration.300ms.opacity.scale.90] · kj-transition:enter="…" …

Toggle display, optionally with transitions.

Reference: kj-show →

Add/remove DOM; keyed lists over arrays, objects or ranges.

Reference: kj-if / kj-for →

Migrating

Coming from Alpine.jsx-transition and all of its modifiers and phase classes carry over as kj-transition.

Related features

Pulse