transitions-kit
v1.2.4
Published
A set of predefined transition components
Downloads
6,576
Maintainers
Readme
TransitionsKit
A set of predefined transition components build on top of react-transition-gorup
Implementation is based on Mui source code.
See the demo
Usage example
Fade:
<Fade in={open}>
<img src='https://picsum.photos/400' />
</Fade>
Slide:
<Slide direction='up' in={checked} container={containerRef.current}>
content
</Slide>
Grow:
<Grow in={open} timeout={500}>
<img src='https://picsum.photos/400' />
</Grow>
Collapse:
<Collapse in={open} unmountOnExit>
<img src='https://picsum.photos/400' />
</Collapse>
Zoom:
<Zoom in={open} timout={500}>
<img src='https://picsum.photos/400' />
</Zoom>
Blur:
<Blur in={open} timout={500}>
<img src='https://picsum.photos/400' />
</Blur>
Child requirements:
- 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).