React中路由切换动画

最新推荐文章于 2024-01-29 14:29:39 发布

北海屿鹿

最新推荐文章于 2024-01-29 14:29:39 发布

阅读量285

点赞数 5

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zz130428/article/details/128388988

版权

React 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

本文介绍了如何在React应用中使用`react-router-dom`实现路由切换时的动画效果，通过`CSSTransition`和`Animate`状态管理，确保在 '/' 和 '/wish' 之间的路径变化时，左右动画无缝过渡。

摘要由CSDN通过智能技术生成

react框架下App.js

import React from 'react'
import { Switch, Route, withRouter, Link, Redirect } from 'react-router-dom'
import './App.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import Login from './components/Login'
import Wish from './components/Wish'
class App extends React.Component {
    state = {
        animate: "animateLeft"
    }
    componentWillReceiveProps(nextProps) {
        let to = nextProps.location.pathname
        let from = this.props.location.pathname
        console.log(to, from)
        if (to == "/" && from == "/wish" || to == "/wish" && from == "/") {
            // 加右动画
            this.state.animate = "animateRight"
        } else {
            // 加左动画
            this.state.animate = "animateLeft"
        }
    }
    shouldComponentUpdate(nextProps) {
        let to = nextProps.location.pathname
        let from = this.props.location.pathname
        if (to == from) {
            return false
        } else {
            return true
        }
    }
    render() {
        return (
            <div className="App">
                <TransitionGroup>
                    <CSSTransition timeout={2000} classNames={this.state.animate} unmountOnExit key={this.props.location.pathname}>
                        <Switch location={this.props.location}>
                            <Route exact path="/" component={Login} />
                            <Route path="/wish" component={Wish} />
                            <Redirect to="/"></Redirect>
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
            </div>
        );
    }
}


export default withRouter(App);

App.css

/* 入场动画过程 */
.animateLeft-enter{
  transform: translateX(100%) rotate(0) scale(0);
}
.animateLeft-enter-active{
  transition: all 2s;
  transform: translateX(0)  rotate(360deg) scale(1);
}
.animateLeft-enter-done{
  transform: translateX(0);
}
/* 出场动画过程 */
.animateLeft-exit{
  opacity: 1;
  /* transform: translateX(0px) */
}
.animateLeft-exit-active{
  opacity: 0;
  transition: 2s;
  /* transform: translateX(200px) */
}
.animateLeft-exit-done{
  opacity: 0;
  /* transform: translateX(200px) */
}


/* 入场动画过程 */
.animateRight-enter{
  transform: translateX(-100%) rotate(0) scale(0);
}
.animateRight-enter-active{
  transition: all 2s;
  transform: translateX(0)  rotate(360deg) scale(1);
}
.animateRight-enter-done{
  transform: translateX(0);
}
/* 出场动画过程 */
.animateRight-exit{
  opacity: 1;
  /* transform: translateX(0px) */
}
.animateRight-exit-active{
  opacity: 0;
  transition: 2s;
  /* transform: translateX(200px) */
}
.animateRight-exit-done{
  opacity: 0;
  /* transform: translateX(200px) */
}