路由动画 react-transition-group

官网

https://reactcommunity.org/react-transition-group/

安装

# npm
npm install react-transition-group --save

CSSTransition

App.jsx

import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'

import './style.css'
import 'animate.css'

class App extends Component {
    state = {
        show: true
    }

    handleClick = () => {
        this.setState(prevState => ({ show: !prevState.show }))
    }

    render() {
        return (
            <div>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    appear={true}
                    classNames={{
                        appear: 'animate__animated',
                        appearActive: 'animate__pulse',
                        enter: 'animate__animated',
                        enterActive: 'animate__rubberBand',
                        exit: 'animate__animated',
                        exitActive: 'animate__jello'
                    }}
                    mountOnEnter
                    unmountOnExit
                >
                    <div style={{ fontSize: '50px' }}>hello</div>
                </CSSTransition>
                <button onClick={this.handleClick}>click</button>
            </div>
        );
    }
}

export default App

mountOnEnter 显示
unmountOnExit 隐藏

style.css

.my-node-enter {
    opacity: 0;
}

.my-node-enter-active {
    opacity: 1;
    transition: opacity 1000ms;
}

.my-node-exit {
    opacity: 1;
}

.my-node-exit-active {
    opacity: 0;
    transition: opacity 1000ms;
}

动画库：Animate.css

$ npm install animate.css --save