《ReactJS》读书笔记十三_html/css_WEB-ITnose

动画

动画可以让用户体验变得更加流场与自然，在 React 中如何使用动画呢？React 的 TransitionGroup插件配合 CSS3 可以让我们在项目中整合动画效果变得易如反掌。

在 React 中动画是一种偏声明式的方法来实现的， TransitionGroup会在合适的渲染及冲渲染时间点有策略地添加和移除元素的 class，以此来简化将 CSS 动画应用于渐变的过程。也就是说，我们需要做的就是给这些 class写上合适的动画效果。

间隔渲染以牺牲性能为代价提供了更多的扩展性和可控性。这种方法需要更多次的渲染，但同时也允许你为 CSS 之外的内容(比如滚动条位置及 Canvas绘图)添加动画。

CSS渐变组

看一下我们的示例程序—问卷制作工具—是如何在问卷编辑器中渲染问题列表的。

<ReactCSSTransitionGroup transitionName="question">	{questions}</ReactCSSTransitionGroup>

ReactCSSTransitionGroup是一款插件，它在文件最顶部通过：

var ReactCSSTransitionGroup = React.addons.ReactCSSTransitionGroup;

语句被引人。它会自动在合适的时候处理组件的重渲染，同时根据当前的渐变状态调整渐变组的 class以便实现组件样式的改变。

给渐变 class 添加样式

按照惯例，为元素添加 transitionName="question"意味着给它添加了 4 个 class: question-enter, question-enter-active, question-leave及 question-leave-active。当子组件进入或退出 ReactCSSTransitionGroup时， CSSTransitionGroup插件会自动添加或移除这些 class。

下面是问卷编辑器中使用到的渐变样式:

.survey-editor .question-enter{	transform: scale(1.2);	transition: transform o.2s cubic-bezier(.97, .84, .5, 1.21);}.survey-editor .question-enter-active{	transform:scale(1);}.survey-editor .question-leave{	transform: translateY(o);	opacity: 0;	transition: opacity 1.2s, transform 1s cubic-bezier(5z, -0.25, .52, .95);}.survey-editor .question-leave-active{	opacity: 0;	transform: translateY(-100%);}

注意这些 .survey-editor选择器并不是 ReactCSSTransitionGroup需要的，它们只是简单地用来确保这些样式只会在编辑器里生效。

渐变生命周期

question-enter与 question-enter-active的区别在于， question-enter这个 class是组件被添加到渐变组后即刻添加上的，而 question-enter-active则是在下一轮渲染时添加的。这样的设计让你能轻松地定义渐变开始时的样式、结束时的样式以及如何进行渐变。

举个例子，当问卷编辑器中的问题被添加到列表时，它们首先被用 scale(1.2)放大，然后渐变到正常的 scale(1)状态，总共耗时 0.2 秒。这就创造出了一种你看到的跳出来的效果。

默认情况下，渐变组同时启用了进入和退出的动画，你可以通过给组件添加 transitionEnter = {false}或 transitionLeave = {false}属性来禁用其中一个或全部禁用。除了可以控制选择哪些动画效果外，我们还能根据一个可配置的值在特定的情况下禁用动画，像这样:

<ReactCSSTransitionGroup	transitionName="question"	transitionEnter={this.props.enableAnimations}	transitionLeave={this.props.enableAnimations}>	{questions}</ReactCSSTransitionGroup>