react 引入轮播插件_React中使用CSSTransitionGroup插件实现轮播图

动画效果，是一个页面上必不可少的功能，学习一个新的东西，当然就要学习，如何用新的东西，用它的方法去实现以前的东西啦。今天呢，我就在这里介绍一个试用react-addons-css-transition-group插件，在react中实现轮播图效果。

首先，大家需要了解的是，页面中的动画，可以分为两种，一种是js动画，这是用js脚本来驱动的动画，另一种呢，就是用css的transiton和animation来实现的动画效果。而我要讲的插件，就是利用CSS的Transition和animation来实现组件的出场和入场动画。

所以呢，我将先给大家简单介绍一下transition和animation，然后在介绍如何使用react-addons-css-transition-group插件，最后附上我实现的轮播图。

1. CSS3 transition

现在假设我们想让一个元素，当我们hover时，它的宽高从50px变为100px。

Document

}.box:hover{width:100px;height:100px;

}