transitions-kit

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).