A set of predefined transition components build on top of react-transition-gorup
Implementation is based on Mui source code.
See the demo
<Fade in={open}>
<img src='https://picsum.photos/400' />
</Fade><Slide direction='up' in={checked} container={containerRef.current}>
content
</Slide><Grow in={open} timeout={500}>
<img src='https://picsum.photos/400' />
</Grow><Collapse in={open} unmountOnExit>
<img src='https://picsum.photos/400' />
</Collapse><Zoom in={open} timout={500}>
<img src='https://picsum.photos/400' />
</Zoom><Blur in={open} timout={500}>
<img src='https://picsum.photos/400' />
</Blur>- Forward the ref: The transition components require the first child element to forward its ref to the DOM node.
- Single element: The transition components require only one child element (React.Fragment is not allowed).