使用渐变组的隐患
使用渐变组也有两个隐患需要非常注意的。
首先，渐变组会延迟子组件的移除直到动画完成。也就是说如果你把一个列表的组件包裹进一个 ReactCSSTransitionGroup中，却没有为 transitionName属性指定的 class明确任何 CSS，这些组件将永远无法被移除，甚至当你尝试不再渲染它们时也不可以。
其次，渐变组的每一个子组件都必须设置一个独一无二的 key属性。渐变组使用这个属性来判断组件究竟是进人还是退出，因此如果没有设置 key属性动画可能无法执行，同时组件也会变得无法移除。
注意，即使渐变组只有一个子元素，它也需要设置一个 key属性。
间隔渲染
使用 CSS3 动画能够获得巨大的性能提升并拥有简洁的代码，但它们并不总是解决问题的正确工具。有些时候你必须要为较老的、不支持 CSS3 的浏览器做兼容，还有些时候你想为 CSS 属性之外的东西添加动画，比如滚动条位置或 Canvas绘画。在这些情况下，间隔渲染能够满足我们的要求，但是相比 CSS3 动画来说，它会带来一定的性能损耗。
间隔渲染最基本的思想就是周期性地触发组件的状态更新，以明确当前处于整个动画时间中的什么阶段。通过在组件的 render()方法中加入这个状态值，组件能够在每次状态更新触发的重渲染中正确表示当前的动画阶段。
因为这种方法涉及多次重渲染，所以通常最好和 requestAnimationFrame一起使用以避免不必要的渲染。不过，在 requestAnimationFrame不被支持或不可用的情况下，降级到不那么智能的 setTimeout()就是唯一的选择了。
使用requestAnimationFrame实现间隔渲染假设你希望使用间隔渲染将一个 div从屏幕的一边移向另一边，可以通过给它添加 position: absolute并随着时间变化不停更新 left或 top属性来实现。根据消耗时间内的变化总量，用 requestAnimationFrame来实现这个动画应该可以得出一个流畅的动画。
下面是具体实现的例子。
var Positioner = React.createClass({ getInitialState: function(){ return { position: 0 }; }, resolveAnimationFrame: function(){ var timestamp = new Date(); var timeRemaining = Math.max(0, this.props.animationCompleteTimestamp - timestamp); if (timeRemaining > 0){ this.setState({ position: timeRemaining }); } }, componentWillUpdate: function(){ if(this.props.animationCompleteTimestamp){ requestAnimationFrame(this.resolveAnimationFrame); } }, render: function(){ var divStyle = { left: this.state.position }; return This will animate!
查看更多关于《ReactJS》读书笔记十四_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111623