内容简介：react 15.5+ 使用CSSTransitionGroup实现路由过渡动画
在做react项目过程中，有时候想实现app的那种上下左右切换路由的特效，但是一直没有找到合适的教程，要么说的不清楚，没有demo，要么就是版本太老，过时了，要抓狂啦:tired_face:。
根据网上搜到的资料，以前实现react动画有这么几种方式：
1、ReactCSSTransitionGroup
2、react-router-transition
3、还有的就是根据这2个库做了二次封装的一些动画插件。
但是，在这里我要分享的是 react-transition-group ，为什么是这个，而不是上面2个，因为这个动画插件兼容react15.4+版本，而且也是官方推荐的，上面2个插件只适合react老版本的动画。
你可以先浏览，觉得可以再看下面的内容： react过渡动画线上效果 （请点击右上角的搜索按钮查看动画）
安装 react-transition-group
npm install react-transition-group --save
在react中使用 react-transition-group
我使用的版本是 react15.5 + react-router4 + redux3.6
为什么要提到这3个插件？
答：非常关键，如果你的项目没有使用redux，那么请寻找其他动画方案。
原理：在路由外层使用 react-transition-group ，配置动画样式、同时你还需要一个唯一的key表示子节点。
我们知道，react-router4被设计成了组件，可以在react组件中任意位置使用，常常你在入口处需要用到react-router，因为你希望一打开首页，就要加载首页路由，还有可以从首页跳往其他页面的路由组件。
在 App.js中，关键代码
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
import createHistory from 'history/createHashHistory'
const history = createHistory()
export default class App extends React.Component {
render() {
const { animateCls } = this.props.global
return (
<Router history={history}>
<Route render={({ location }) => {
return(
<CSSTransitionGroup
transitionName={animateCls}
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={400}
transitionLeaveTimeout={400}
>
<div key={location.pathname}>
<Route location={location} exact path="/" component={Home} />
<Route location={location} path="/search" component={Search} />
</div>
</CSSTransitionGroup>
)
}}/>
</Router>
)
}
}
你应该关注这段代码的下面几个部分，或许你在github上都能看到官方文档，但是官方文档没有教我们如何控制不同页面的动画动态展示。
1、const { animateCls } = this.props.global
animateCls是存储在store中的变量，他用来表示动画的transitionName，也就是动画样式，store是什么？是redux中的数据存储核心，我们需要实现在不同状态下面，transitionName的动画样式会按照我们的需求而改变，比如从首页切换到二级页面，然后从2级页面返回到首页，这2个过程执行的动画是相反的，这时候我们不能把transitionName写死。
我写了一个action，来控制animateCls值的变化。这个action很简单，就是传入一个样式参数，当不同的状态的时候，传入不同的参数就能实现动画的定制了。
export const currentAnimate = (cls) => ({
type: 'CURRENT_ANIMATE',
cls
})
熟悉redux的你，就会知道还需要写reducer。
const initState = {
animateCls: 'normal', //过渡动画样式
}
export const global = (state = initState, action) => {
switch (action.type) {
case "CURRENT_ANIMATE":
return {
...state,
animateCls: action.cls
}
default:
return state
}
}
接着我们就回到了一开始的那一步，在组件中读取 const { animateCls } = this.props.global。
然后，我写了2个动画样式，一个是往左边移动、一个是往右边移动。
/*路由切换动画——左移动*/
.left-enter {
position: absolute;
top: 0;
background: #fff;
z-index: 10000;
opacity: 1;
transform: translateX(100%);
}
.left-enter.left-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 0.4s ease-out;
}
.left-leave {
opacity: 1;
transform: translateX(0);
}
.left-leave.left-leave-active {
opacity: 1;
transform: translateX(-100%);
transition: all 0.4s ease-out;
}
/*路由切换动画——右移动*/
.right-enter {
transform: translateX(-100%);
}
.right-enter.right-enter-active {
transform: translateX(0);
transition: all 0.4s ease-out;
}
.right-leave {
position: absolute;
top: 0;
background: #fff;
z-index: 10000;
opacity: 1;
transform: translateX(0);
}
.right-leave.right-leave-active {
opacity: 1;
transform: translateX(100%);
transition: all 0.4s ease-out;
}
关于CSS3的知识，我就不解释了，以右移样式为例子，对每个参数做一下说明。
一个动画完整流程，满足下面4个样式
.right-enter {}
.right-enter.right-enter-active {}
.right-leave {}
.right-leave.right-leave-active {}
right表示的是 animateCls，也就是我们要动态设置的值，react动画分为进入和离开，很多人可能不太理解进入和离开到底指什么。
enter：新路由进入的动画。
leave：旧路由离开的动画。
比如，从二级页面返回首页，当你点击返回按钮后，二级页面执行的是leave的动画，首页执行的是enter的动画，2个动画执行是同时进行的。
因为animateCls默认是normal，要让他改成right，只需要在当前组件中监听返回按钮的onClick事件，然后执行dispatch action，传入参数“right”。
但是这样做不是很完善，因为浏览器和app不同，浏览器有自己的返回按钮，所以你还需要监听浏览器的返回按钮。这一步我还没有完善好，相信对于熟悉监听事件的你来说，是个很容易完善的功能，如果是做react-native，那么可以省去监听浏览器返回按钮的步骤。
比如我只监听了网页中的返回按钮onCLick事件。
<Link to="/" className="style_a" onClick={() => handleClick('right')}>返回首页</Link>
2、别忘了设置一个唯一的key，如果你的组件是一个列表，那么需要在map的时候设置一个key。
整体实现方案就这么多，喜欢使用react过渡动画的上吧。
如果你想看具体代码，在这里： react路由动画关键代码
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
