Transition
Transition
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 current should move toward the
entered
orexited
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 App() {
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>
)
}