使用react-transition-group实现路由切换动画

我们在使用React开发SPA的时候,使用react-router可以完成路由切换,但是这样路由切换是非常生硬的。有什么解决办法呢?我们可以使用react-transition-group来实现自定义的路由切换效果。

需要注意的是react-transition-group目前有两个版本,v1和v2版本的差距十分巨大,本教程使用的是最新的V2版本,你可以使用npm install --save react-transition-group来安装,如果想安装v1版本,则只需使用npm install --save react-transition-group@1.x命令即可。

react-transition-group主要提供三个组件TransitionTransitionGroupCSSTransition。从名字当中我们知道TransitionGroup作为一个容器组件,而其它两个组件才是实现动画的关键。这里我只介绍CSSTransition如何使用以及其注意的点。如需了解更多react-transition-group,请查看官方文档

CSSTransition

这个组件主要是使用css来控制组件的转场。它使用了在缓动中appearenterexit的三个状态,并且提供钩子类让我们自定义效果。

我们常用到的类有:

.className-enter
.className-enter.className-enter-active
.className-exit
.className-exit.className-exit-active

这里className是你自定义动画的名称,和V1版本大体相同的钩子类,只不过把leave改成了更加语义化的exit,这里需要注意。

CSSTransition有多个十分重要的属性:

  1. classNames属性接收一个字符串类名,注意这里是classNames而不是className
  2. timeout用于规定动画执行的时间,如果enterexit的持续时间相同的话可以使用timeout={number}即可,如果持续时间不一样,则timeout接收一个字典,两个键分别是enter和exit。
  3. 其他参数例如onEnteronExit你可以自定义逻辑在动画进行到某个阶段后触发。
  4. 动画进行的阶段:enter->entering->entered->exit->exiting->exited

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

let App = () => (
<BrowserRouter>
<Route render={({location}) => {
return <div>
<Route exact path="/" render={() => (
<Redirect to="/home"/>
)}/>
<TransitionGroup>
<CSSTransition
key={location.pathname.split('/')[1]}
classNames="transitionWrapper" // 这里一定要注意的是:classNames 而不是className
timeout={400}
mountOnEnter={true}
unmountOnExit={true}
>
<div className="wrapper">
<Switch location={location}>
<Route exact path="/home" component={Home}/>
<Route path="/inspiration" render={() =><NavLink style={{marginRight: '20px', marginLeft: '20px'}} to="/home">HOME</NavLink>
}/>
<Route path="/mood" render={() => <h1>this is page3 mood!</h1>}/>
</Switch>
</div>
</CSSTransition>
</TransitionGroup>
</div>
}}/>
</BrowserRouter>
);
分享到 评论