如何在react中实现路由的切换动画

如何在react中实现路由的切换动画

1 yarn add react-animated-router --save 或者 npm i yarn add react-animated-router --save 插件
2 yarn add react-transition-grop --save 第一个库依赖这个库

具体用法

import React, { Component } from 'react'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
import 'react-animated-router/animate.css'; //引入默认的动画样式 包自带的
export default class App extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <Router>
                <AnimatedRouter> {/* 需要使用动画的路由用 AnimatedRouter包裹*/}
                        <Route exact path='/' component={ Home }></Route>
                </AnimatedRouter>
                <Switch> {/* 不需要使用动画的路由用 该怎么写还怎么写*/}
                    <Route path='/index' component={ Index }></Route>
                    <Route path='/test' component={ Test }></Route>
                </Switch>
            </Router>
       )
    }
}

附带

import { CSSTransition } from "react-transition-group";
// CSSTransition 可以实现很多react中的动画效果 以及可以结合 animate.css动画库

详情看官方