Transition

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

Using Transitions

element^*: a function that recieves the transition state as an argument and returns a JSX.Element.
in^*: specifies whether the current should move toward the entered or exited state.
duration (optional, default 150ms): allows you to specify duration in milliseconds.
onTransitionEnd: allows you to specify a function to be called when the transition ends.

Example

import { signal, Transition } from "kiru"

function App() {
  const expanded = signal(false)
  const toggleExpanded = () => (expanded.value = !expanded.value)

  return () => (
    <div className="flex flex-col">
      <button onclick={toggleExpanded}>Show More</button>

      <Transition
        in={expanded}
        duration={300}
        // alternatively:
        // duration={{
        //  in: 300,
        //  out: 300
        //}}
        onTransitionEnd={(state) => console.log("Transition ended", state)}
        element={(state) => {
          if (state === "exited") return null
          return <DetailsView opacity={state === "entered" ? 1 : 0} />
        }}
      />
    </div>
  )
}

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