Common transition components for Chakra UI
npm install @chakra-ui/transition``sh`
yarn add @chakra-ui/transitionor
npm i @chakra-ui/transition
The Collapse component is used to create regions of content that can
expand/collapse with a simple animation. It helps to hide content that's not
immediately relevant to the user.
`jsx`
import { Collapse } from "@chakra-ui/transition"
`jsx`
function SampleSpring() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
)
}
`jsx
function Example() {
const [show, setShow] = React.useState(false)
const handleToggle = () => setShow(!show)
return (
<>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
)
}
`
// TODO: Explain the framer-motion` part and how to customize the motion
variants