The Transition component enables you to animate the DOM in a procedural / coroutine-like fashion. Useful for modals, drawers and dialogs.

Using Transitions

Transition requires two properties - element and in, and can optionally take a 3rd, timings, for controlling timings between - entering, entered, exiting and exited.

  • element: a function that recieves the transition state as an argument and returns a JSX.Element.
  • in: specifies whether the transition state should move toward the entered or exited state.
  • timings (optional): allows you to specify a delay for each step of the transition component as it iterates through each of the four states.


import { useState, Transition } from "kaioken"

function Home() {
  const [expanded, setExpanded] = useState(false)
  return (
    <div className="flex flex-col">
      <button onclick={() => setExpanded((prev) => !prev)}>
        Show More
        timings={[33, 300, 300, 300]} 
        element={(state) => {
          if (state === "exited") return null
          return <DetailsView opacity={state === "entered" ? "1" : "0"} />

function DetailsView({opacity}) {
  return (
    <p style={{ transition: "all .3s ease", opacity }}>
      Some more information 🧠