React动画实践_html/css_WEB-ITnose

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var Carousel = React.createClass({        propTypes: {    transitionName: React.PropTypes.string.isRequired,            imageSrc: React.PropTypes.string.isRequired        },        render: function() {            return (                                                                                                

剩下的就是在父组件中为其传入合适的transitionName以及imageSrc即可。效果如下：

聪明的你一定发现了：在这个组件当中，当一个新的列表项被添加到ReactCSSTransitionGroup，它将会被添加transitionName-enter对应的css类，然后在下一时刻被添加transitionName-enter-active 对应的CSS类；当一个列表项要从ReactCSSTransitionGroup中移除时，他也将会被添加transitionName-leave对应的css类，然后在下一时刻被添加transitionName-leave-active 对应的CSS类，这里要注意的是，当你尝试移除一项的时候，ReactCSSTransitionGroup仍会保持该项在DOM里，直至动画结束；

示例中演示的两个切换效果只需要修改transitionName属性对应的CSS动画类即可：

透明度切换效果：

.carousel1-enter {    opacity: 0;}.carousel1-enter-active {    opacity: 1;    transition: opacity 300ms ease-in;}.carousel1-leave {    opacity: 1;}.carousel1-leave-active {    opacity: 0;    transition: opacity 300ms ease-in;}

位移切换效果：

.carousel2-enter {    left: 100%;}.carousel2-enter-active {    left: 0;    transition: left 300ms ease-in;}.carousel2-leave {    left: 0;}.carousel2-leave-active {    left: -100%;    transition: left 300ms ease-in;}

• 大家都注意到了，我一直在提transitionName这个属性，其实对于ReactCSStransitionGroup来说，一个属性是完全不够的，下面来详细介绍下它的属性们。

• 2、属性们

• （1）、transitionName

{oneOfType([React.PropTypes.string,React.PropTypes.object]).isRequired}

作用：关联CSS类：

例如：

transitionName-appear;transitionName-appear-active;transitionName-enter;transitionName-enter-active;transitionName-leave;transitionName-leave-active;

制定CSS类：

  transitionName={ {         enter: ‘enter’,        enterActive: ‘enterActive’,        leave: ‘leave’,         leaveActive: ‘leaveActive’,         appear: ‘appear’,         appearActive: ‘appearActive’   } }

（2）、transitionAppear

{React.PropTypes.bool} {false}

作用：初始化挂载动画。来为在组件初始挂载添加一个额外的过渡阶段。 通常在初始化挂载时没有过渡阶段因为transitionAppear 的默认值为false。

例如：

render: function() {       return (             
FadingatInitialMount
                  ); }

（3）、transitionEnter

{React.PropTypes.bool} {true}

作用：用来禁用 enter动画

（4）、transitionLeave

{React.PropTypes.bool} {true}

作用：用来禁止leave动画 ReactCSSTransitionGroup 会在移除你的DOM节点之前等待一个动画完成。你可以添加transitionLeave={false} 到ReactCSSTransitionGroup 来禁用这些动画。

（5）、component

{React.PropTypes.any} {‘span’}

作用：默认情况下 ReactTransitionGroup 渲染为一个 span。你可以通过提供一个 component prop 来改变这种行为. 组件不需要是一个DOM组件，它可以是任何你想要的React组件，甚至是你自己写的。

（6）、className

{ React.PropTypes.string }

作用：给当前的component设置样式类

例如：

  ... 

3、 生命周期

当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。

componentWillAppear(callback)

对于被初始化挂载到 CSSTransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它只会在CSS TransitionGroup 初始化渲染时被调用。

componentDidAppear()

在 传给componentWillAppear 的 回调 函数被调用后调用。

componentWillEnter(callback)

对于被添加到已存在的 CSSTransitionGroup 的组件，它和 componentDidUpdate() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它不会在 CSSTransitionGroup 初始化渲染时被调用。

componentDidEnter()

在传给 componentWillEnter 的回调函数被调用之后调用。

componentWillLeave(callback)

在子级从 ReactCSSTransitionGroup 中移除时调用。虽然子级被移除了，ReactTransitionGroup 将会保持它在DOM中，直到callback被调用。

componentDidLeave()

在willLeave callback 被调用的时候调用（与 componentWillUnmount 同一时间）。

1. 4、原理简述

以componentWillEnter为例，伪代码如下：

componentWillEnter (callback) {    letel = ReactDOM.findDOMNode(this);    el.classList.add(styles.enter);    requestAnimationFrame(() => {           el.classList.add(styles.active);    });    el.addEventListener('transitionend', () => {        callback && callback();        el.classList.remove(styles.enter);        el.classList.remove(styles.active);    });}

在 componentWillEnter 里给 Animation 组件添加了 styles.enter 样式类，然后在浏览器下一个 tick 加入 styles.active 样式类 – 这里使用了 requestAnimationFrame，也可以使用 setTimeout，另外还监听 ‘transitionend’ 事件，transitionend 事件发生时执行回调 callback 并移除 styles.enter 与 styles.active 两个样式类

5、 注意事项

①. 一定要为ReactCSSTransitionGroup的所有子级提供 key属性。即使只渲染一个项目。React靠key来决定哪一个子级进入，离开，或者停留。

②、动画持续时间需要被同时在CSS和渲染方法里被指定。这告诉React什么时候从元素中移除动画类，并且如果它正在离开，决定何时从DOM移除元素。

③、ReactCSSTransitionGroup必须已经挂载到了DOM才能工作。为了使过渡效果应用到子级上，ReactCSSTransitionGroup必须已经挂载到了DOM或者 prop transitionAppear 必须被设置为 true。ReactCSSTransitionGroup 不能随同新项目被挂载，而是新项目应该在它内部被挂载。

6、 劣势

ReactCSSTransitionGroup的优势是非常明显的，简化代码、提高性能等，但是其劣势我们也需要了解，以在做实际项目时进行适当的取舍。

① 不兼容较老的、不支持CSS3的浏览器；

② 不支持为CSS属性之外的东西（比如滚动条位置或canvas绘画）添加动画；

③ 可控粒度不够细。CSS3动画只支持start、end、iteration三个事件，不支持对中间状态进行处理。

④ transitionEnd和animationEnd事件不稳定。

7、 V0.14动画新特性

新增属性：

transitionAppearTimeouttransitionEnterTimeouttransitionLeaveTimeout

控制动画持续时间，解决animationend transitionend 事件不稳定、时有时没有的现象，v0.15版本将彻底放弃监听animationend transitionend 事件。

官方原话是： To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.

原理上其实是简化了，还是以componentWillEnter为例，伪代码如下：

componentWillEnter (callback) {    letel = ReactDOM.findDOMNode(this);    el.classList.add(styles.enter);    requestAnimationFrame(() => {           el.classList.add(styles.active);    });    setTimeout( () => {        callback && callback();        el.classList.remove(styles.enter);        el.classList.remove(styles.active);    }, props.transitionEnterTimeout);}

所以我们的轮播图就要改为这样实现：

（三） 间隔动画

深入了解了CSS渐变组，大家也看到了它并不是万能的，所以需要间隔动画来做辅助，或者说是第二选择。

间隔动画实现方式很简单，有两种：

1、 requestAnimationFrame

2、 setTimeout

requestAnimationFrame可以以最小的性能损耗实现最流畅的动画，它被调用的次数频繁度超出你想象。在requestAnimationFrame不支持或不可用的情况下，就要考虑降级到不那么智能的setTimeout了。

间隔动画在实现原理上其实很简单，就是周期性的触发组件的状态更新，通过在组件的render方法中加入这个状态值，组件能够在每次状态更新触发的重渲染中正确表示当前的动态阶段。

以实现元素右移100px为例，代码实现如下所示：

1、requestAnimationFrame实现

var Todo = React.createClass( getInitialState: function() { return { left: 0 }; }, componentWillUpdate: function() { requestAnimationFrame(this. resolveAnimationFrame); }, render: function() { return This willanimate!