React Animate Mount

Simple and light component for animating mount and unmount

< Animate />

SlideUp / SlideDown component (animate height 0 and 'auto', like this page's floating nav)

<Animate show={this.state.show} />
<div className="example-animate">
<h2>This component slideUp and slideDown</h2>
</div>
</Animate>
Click to toggle animation

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

FadeIn / FadeOut component (animate opacity 0 and 1)

<Animate show={this.state.show} type="fade" />
<div className="example-animate">
<h2>This component fadeIn and fadeOut</h2>
</div>
</Animate>
Click to toggle animation

Or simply animateIn on mount (like this page's header)

<Animate appear show />
<h1>React Animate Mount</h1>
<h3> Simple and light component... </h3>
</Animate>

< AnimateGroup />

Animate items when they are added / removed from a list

<AnimateGroup>
{items.map(item => (<Item key=... data=... />)}
</AnimateGroup>
Add/Remove item

1

2

3

4

5

Github

https://github.com/MingruiZhang/react-animate-mount