var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),C=(o,n)=>{for(var i in n)l(o,i,{get:n[i],enumerable:!0})},s=(o,n,i,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of u(n))!m.call(o,t)&&t!==i&&l(o,t,{get:()=>n[t],enumerable:!(a=p(n,t))||a.enumerable});return o};var f=(o,n,i)=>(i=o!=null?h(g(o)):{},s(n||!o||!o.__esModule?l(i,"default",{value:o,enumerable:!0}):i,o)),B=o=>s(l({},"__esModule",{value:!0}),o);var d=x((O,r)=>{r.exports=_jsx_runtime});var k={};C(k,{default:()=>w,frontmatter:()=>S});var e=f(d()),S={id:"transitions",category:"other",title:"Transitions",package:"@chakra-ui/transition",description:"Chakra exports five components `Fade`, `ScaleFade`, `Slide`, `SlideFade` and `Collapse` to provide simple transitions."};function c(o){let n=Object.assign({h2:"h2",p:"p",code:"code",ul:"ul",li:"li",pre:"pre",h3:"h3",h4:"h4"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"import",children:"Import"}),` `,(0,e.jsxs)(n.p,{children:["Most transition components are made using ",(0,e.jsx)(n.code,{children:"framer-motion"}),`. They accept the following props:`]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["Common props from framer's ",(0,e.jsx)(n.code,{children:"motion"})," elements"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"in"})," prop used to trigger the transition"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"unmountOnExit"})," prop used to unmount the component when it is not visible."]}),` `]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-js",children:`import { Fade, ScaleFade, Slide, SlideFade, Collapse } from '@chakra-ui/react' `})}),` `,(0,e.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,e.jsxs)(n.p,{children:["Chakra exports five components ",(0,e.jsx)(n.code,{children:"Fade"}),", ",(0,e.jsx)(n.code,{children:"ScaleFade"}),", ",(0,e.jsx)(n.code,{children:"Slide"}),", ",(0,e.jsx)(n.code,{children:"SlideFade"}),` and `,(0,e.jsx)(n.code,{children:"Collapse"})," to provide simple transitions."]}),` `,(0,e.jsx)(n.h3,{id:"fade-transition",children:"Fade transition"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function FadeEx() { const { isOpen, onToggle } = useDisclosure() return ( <> Fade ) } `})}),` `,(0,e.jsx)(n.h3,{id:"scalefade-transition",children:"ScaleFade transition"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function ScaleFadeEx() { const { isOpen, onToggle } = useDisclosure() return ( <> Fade ) } `})}),` `,(0,e.jsx)(n.h3,{id:"slide-transition",children:"Slide transition"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function SlideEx() { const { isOpen, onToggle } = useDisclosure() return ( <> ) } `})}),` `,(0,e.jsx)(n.h3,{id:"slide-fade-transition",children:"Slide Fade transition"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function SlideFadeEx() { const { isOpen, onToggle } = useDisclosure() return ( <> ) } `})}),` `,(0,e.jsx)(n.h3,{id:"collapse-transition",children:"Collapse transition"}),` `,(0,e.jsx)(n.p,{children:`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.`}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function CollapseEx() { const { isOpen, onToggle } = useDisclosure() return ( <> ) } `})}),` `,(0,e.jsx)(n.h4,{id:"changing-the-startingheight",children:"Changing the startingHeight"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`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. ) } `})}),` `,(0,e.jsx)(n.h4,{id:"changing-transitions-manually-using-motion-props",children:"Changing transitions manually using motion props"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function CollapseEx() { const { isOpen, onToggle } = useDisclosure() return ( <> ) } `})})]})}function F(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(c,o)})):c(o)}var w=F;return B(k);})(); ;return Component;

Transitions

Props#

Fade Props#

ScaleFade Props#

Slide Props#

SlideFade Props#

Collapse Props#

Props#

Fade Props#

ScaleFade Props#

Slide Props#

SlideFade Props#

Collapse Props#