Transition

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

Using Transitions

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.
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 { 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} 
        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}) {
  return (
    <p style={{ transition: "all .3s ease", opacity }}>
      Some more information 🧠
    </p>
  )
}