react 引入轮播插件_react中实现CSSTransitionGroup插件实现轮播图、动画过渡等等

安装：

这个库是react官方自带的，它实现于react/lib/ReactCSSTransitionGroup.js。

你可以通过import直接导入这个文件，或者通过命令来安装一个便捷的别名包(仅仅是指向react/lib/ReactCSSTransitionGroup.js)：

npm install –save react-addons-css-transition-group

ReactCSSTransitionGroup组件参数

ReactCSSTransitionGroup其实就是一个组件，它规定了特定的参数，我们通过设置这些特定的参数，将这些参数反应到被其包裹的子组件中。下面，我们就其几个常见的参数进行讲解。

# transitionName:设置动态生成类的自定义前缀，如果我们设置为carousel-image-item，那么，就会相应的生成carousel-image-item-enter, carousel-image-item-enter-active等。

# component: 字符串，设置ReactCSSTransitionGroup生成包裹子组件的标签，默认时span，我们可以通过这个参数自定义，如div。

# transitionEnter:  布尔值，设置是否使用出场动画，默认时true。

# transitionEnterTimeout: 数值，设置入场动画的执行时间，需要在css中和这里同时设置，否则会提示警告。

# transitionLeave:  布尔值，设置是否使用出场动画，默认时true。

# transitionLeaveTimeout: 数值，设置出场动画的执行时间，需要在css中和这里同时设置，否则会提示警告。

最后，说一下transitionAppear，它和其他两个不同，它默认时false，默认不执行。

原理

ReactCSSTransitionGroup也是一个react组件，我们将在react-router的路由容器组件中引用它，让它替我们在路由切换的时候实现页面间的过渡动画。

首先看一下我的路由配置：

ReactDOM.render(

(

),

document.getElementById('reactRoot')

);

一个很简单的路由配置，所有子路由的父容器都是Container组件，路由切换时react-router会将代表子路由的组件(例如MsgListPage)填充到Container的props.children孩子属性中。

既然Container组件是容纳子路由组件的容器，那么可以想到当子路由切换时：Conainter的props.children经历了从老的组件变为了新的组件的过程，如果可以在这个过程中稍作手脚是有机会实现新老组件的平滑过渡的。

先来看一下当前Container当前实现：

import React from "react";

exportdefaultclass Container extends React.Component {

constructor(props, context) {

super(props, context);

}

componentWillMount() {

document.body.style.margin= "0px";//这是防止页面被拖拽

document.body.addEventListener('touchmove', (ev) =>{

ev.preventDefault();

});

}

render() {return(

{this.props.children

}

);

}

}

它将子路由组件(也就是this.props.children)直接填充了进来，这样实现虽然能够完成路由切换，但是它没有任何的过渡效果。

下面利用ReactCSSTransitionGroup实现过渡效果，代码变成了这样：