背景：
在当下的前端背景下，前端的页面对于用户来说，不仅仅是实现了功能，更要注重页面的表现形式，来提升用户的体验度。React 作为最近几年比较流行的前端开发框架，提出了虚拟 DOM 概念，所有 DOM 的变化都先发生在虚拟 DOM 上，通过 DOM diff 来分析网页的实际变化，然后反映在真实 DOM 上，从而极大地提升网页性能。并且react强调用数据去驱动页面的展示，并不直接去操作DOM，从而在react中添加动画就变得有点困难，今天就介绍几种在react中添加动画的方式。
1.基于 React 组件状态的 CSS 动画
class App extends Component {
this.state = {
switch: false
}
componentDidMount() {
this.input.addEventListener('focus', this.focus);
this.input.addEventListener('blur', this.focus);
}
focus = () => {
this.setState((state) => ({ switch: !state.switch}))
}
render() {
return (
<div className="App">
<div className="container">
<input
ref={input => this.input = input}
className={['input', this.state.switch&& 'input-switch'].join(' ')}
/>
</div>
</div>
);
}
}
- 我们通过一个状态switch去控制input元素上的类名，每个类名都加了css3动画。
2.在componentDidMount中去监听input元素获取焦点和失去焦点时控制switch的变化，从而控制元素动画的展现形式。
2.React Motion
一个简单的应用：
<Motion defaultStyle={{left: 0}} style={{left: spring(10)}}>
{interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>
指定一个初始style(defaultStyle)，然后赋值一个目标style(style)，中间每帧都会由react-motion计算出对应的style，用户只管使用生成的style(interpolatingStyle)，不用关心物理效果的实现，动画中断的处理，一切事情都交给react-motion。
详情可参考：https://github.com/chenglou/react-motion
3.react-addons-css-transition-group
react-addons-css-transition-group插件，是利用css的transition和animation实现组件的进场和出场动画的。ReactCSSTransitionGroup是在ReactTransitionGroup的基础上进行再封装。
import React, {PropTypes} from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
/* 定义参数类型 */
const propTypes = {
imageSrc: PropTypes.array.isRequired,
currentIndex: PropTypes.number.isRequired,
enterDelay: PropTypes.number.isRequired,
leaveDelay: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
component: PropTypes.string.isRequired
}
/* 轮播图片组件，无状态组件 */
function CarouselImage(props) {
/* 对象解析，参数分别对应：图片地址数组，当前展示图片索引，进场动画执行时间，出场动画执行时间，transition对应唯一key值，自动生成的包裹元素类型 */
let {imageSrc, currentIndex, enterDelay, leaveDelay, name, component} = props;
return (
<ul className="carousel-image">
<CSSTransitionGroup
component={component}
transitionName={name}
transitionEnterTimeout={enterDelay}
transitionLeaveTimeout={leaveDelay}
className={name}>
<img
src={imageSrc[currentIndex]}
key={imageSrc[currentIndex]}
/>
</CSSTransitionGroup>
</ul>
);
}
CarouselImage.propTypes = propTypes;
export default CarouselImage;
1. ReactCSSTransitionGroup工作原理
当组件出现时，会在组件添加transitionName-appear类（transitionName由我们自己设置值），然后下一时刻会给组件添加transitionName-appear-active类；当组件进场时，给组件添加transitionName-enter类,然后下一时刻会给组件添加transitionName-enter-active类；当组件出场时，会给组件添加transitionName-leave类，然后下一时刻辉给组件添加transitionName-leave-active类，我们则可以在css文件中，通过设置transition，设置我们需要执行的动画。
一般情况下，我们主要使用后两种，并且，只有当组件的出场动画完全执行玩以后，组件才会被移除。
2. 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中和这里同时设置，否则会提示警告。
4.GSAP
GSAP 是一个老牌的专业级动画库，从古老的 Flash 动画时代一直兴盛至今，它是一个商业产品，虽然开发者可以免费下载源代码，但如果要在商业活动中使用它，请购买相关的会员。如果你没有使用果 GSAP，建议阅读《GSAP，专业的Web动画库》，接下来，我们尝试将 GSAP 融入到 React 的开发中。
将 GSAP 与 React 结合有一个最简单的方式：使用 ref。通过 ref 获取真实的 DOM 节点，实现动画的方式与传统的实现方式一致：
// 导入通过 NPM 安装的 GSAP
import TweenMax from 'gsap';
// 保存 ref 指向的真实节点
let refNode;
class App extends React.Component {
componentDidMount () {
TweenMax.to(refNode, 2, { x: '+=200px', backgroundColor: '#2196f3' });
// TweenMax 可以做什么？
// 暂停
tween.pause();
// 继续播放
tween.resume();
// 反转播放
tween.reverse();
// 跳转到1s进度处开始播放
tween.seek(1);
// 重播
tween.restart();
// 动画变为三倍速
tween.timeScale(3); }
render () {
return ( <div id="ball" ref={c => (refNode = c)}
style={{ width: '100px', height: '100px',
margin: '100px', borderRadius: '50%', backgroundColor: 'red' }}>
</div> ); }
