Transition

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.

Example

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
      </button>
      
      <Transition 
        in={expanded} 
        timings={[33, 300, 300, 300]} 
        element={(state) => {
          if (state === "exited") return null
          return <DetailsView opacity={state === "entered" ? "1" : "0"} />
        }}
      />
    </div>
  )
}


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