文章源自: https://facebook.github.io/react/docs/animation.html

ReactCSSTransitionGroup 基于 ReactTransitionGroup ,当一个React组件enter或者leave时可以方便的用来执行CSS transitions和animations。

导入ReactCSSTransitionGroup

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js

定义组件

var React = require('react');
var ReactDOM = require('react-dom');
var CSSTransitionGroup = require('react-addons-css-transition-group');
var INTERVAL = 2000; var AnimateDemo = React.createClass({
getInitialState: function() {
return {current: 0};
}, componentDidMount: function() {
this.interval = setInterval(this.tick, INTERVAL);
}, componentWillUnmount: function() {
clearInterval(this.interval);
}, tick: function() {
this.setState({current: this.state.current + 1});
}, render: function() {
var children = [];
var pos = 0;
var colors = ['red', 'gray', 'blue'];
for (var i = this.state.current; i < this.state.current + colors.length; i++) {
var style = {
left: pos * 128,
background: colors[i % colors.length]
};
pos++;
children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
}
return (
<CSSTransitionGroup
className="animateExample"
transitionEnterTimeout={1500}
transitionLeaveTimeout={1500}
transitionName="example">
{children}
</CSSTransitionGroup>
);
}
});

注意: 必须给 ReactCSSTransitionGroup 中的每一个child设置一个key属性,即使只渲染一个element

在这个组件中,当添加一个元素到 ReactCSSTransitionGroup 中时,这个元素将会自动添加上 example-enter 和 example-enter-active 样式。添加上的样式基于 transitionName 这个属性来设置。我们需要做的就是定义example-xxx等样式;

.example-enter,
.example-leave {
-webkit-transition: all 2s;
transition: all 2s;
} .example-enter { /* begin **/
opacity: 0.01;
margin-left: 128px;
} .example-enter.example-enter-active { /* finish **/
opacity:;
margin-left:;
} .example-leave {
opacity:;
margin-left:;
} .example-leave.example-leave-active {
opacity: 0.01;
margin-left: -128px;
} .animateExample {
display: block;
height: 128px;
position: relative;
width: 384px;
} .animateItem {
color: white;
font-size: 36px;
font-weight: bold;
height: 128px;
line-height: 128px;
position: absolute;
text-align: center;
-webkit-transition: all 1s; /* TODO: make this a move animation */
transition: all 1s; /* TODO: make this a move animation */
width: 128px;
}

example-enter和example-enter-active分别表示动画开始和动画结束时的样式定义;

动画时间在css样式表中和render方法中,都必须指定,时间用来告诉React什么时候去移除animation样式以及什么时候从DOM中移除元素。

初始加载动画

ReactCSSTransitionGroup 提供了可选的属性 transitionAppear ,用来指定组件初始加载时的动画,该属性默认值是false,所以在组件加载的时候默认是没有动画的;

return (
<CSSTransitionGroup
className="animateExample"
transitionAppear={true}
transitionAppearTimeout={1500}
transitionEnterTimeout={1500}
transitionLeaveTimeout={1500}
transitionName="example">
{children}
</CSSTransitionGroup>
);

修改组件的render方法,并且在css中定义example-appear, example-appear-active样式;

.example-appear {
opacity: 0.01;
margin-left: 128px;
} .example-appear.example-appear-active {
opacity: 1;
margin-left: 0;
}

这样在组件初始加载的时候,也会有动画了!

组件第一次加载的时候,执行的动画是appear,之后再有element动态添加到CSSTransitionGroup,将会执行enter动画,而不会是appear动画;

transitionEnter和transitionLeave默认值是true,所以如果不把它们指定为false的话得指定transitionEnterTimeout和transitionLeaveTimeout。

自定义Classes

除了通过transitionName指定样式,还可以指定每一步的动画样式,其中,active样式名可以不用指定;

// ...
<ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive',
appear: 'appear',
appearActive: 'appearActive'
} }>
{item}
</ReactCSSTransitionGroup> <ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
leave: 'leave',
appear: 'appear'
} }>
{item2}
</ReactCSSTransitionGroup>
// ...

Animating One or Zero Items

上面所实现的动画,都是整个Group中的元素都将被设置动画,实际上还可以指定只需要某一/零个元素执行动画;

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

function ImageCarousel(props) {
return (
<div>
<ReactCSSTransitionGroup
transitionName="carousel"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
<img src={props.imageSrc} key={props.imageSrc} />
</ReactCSSTransitionGroup>
</div>
);
}

Animation Group Must Be Mounted To Work

为了组child添加动画属性,ReactCSSTransitionGroup 必须已经被加载到DOM中,或者将 transitionAppear 设置成true。

render() {
const items = this.state.items.map((item, i) => (
<div key={item} onClick={() => this.handleRemove(i)}>
<ReactCSSTransitionGroup transitionName="example">
{item}
</ReactCSSTransitionGroup>
</div>
)); return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
{items}
</div>
);
}

上面这个例子将不会起作用,因为ReactCSSTransitionGroup被加载到新的div中,而不是已经加载好的元素当中,且没有设置transitionAppear。

Disabling Animations

还可以禁止掉enter或者是leave动画,比如希望有enter动画而不想要leave动画,但是ReactCSSTransitionGroup需要等待动画完成后才从dom中remove元素,此时可以通过设置transitionEnter={false}或者transitionLeave={false}来禁止相应的动画;

在ReactCSSTransitionGroup中,没有动画完成的监听,所以如果想要获取到动画的执行进度并且添加其它操作是不可行的,如果确实有需要,可以使用ReactTransitionGroup

React 动画 Animation的更多相关文章

  1. React-Router 动画 Animation

    React-Router动画实际上和React动画没什么区别,都是使用 'react-addons-css-transition-group' 这个组件:但是,和普通的 React-Router 的 ...

  2. 【React自制全家桶】八、React动画以及react-transition-group动画库的使用

    React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...

  3. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  4. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  5. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  6. Qt-4.6动画Animation快速入门三字决

    Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...

  7. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  8. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  9. View 动画 Animation 运行原理解析

    这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...

随机推荐

  1. Codeblocks自动代码格式化快捷键(自带)

    代码区域右击 点format use AStyle 估计也就是考试竞赛逼着用这个

  2. C++STL 中的容器整体/逐元素操作方法 少写80%for循环

    本文中示例代码默认已引用 std 命名空间 累加 (std::accumulate) accumulate(begin, end, init, op) 返回给定区间内元素的累加值与给定初值的和,初值不 ...

  3. 08-matplotlib-颜色与样式

    import numpy as np import matplotlib.pyplot as plt ''' 颜色: - 八种内置默认颜色, 缩写 b :blue g :green r :red c ...

  4. IPC_Binder_java_1

    title: IPC_Binder_java_1 date: 2017-01-03 21:30:55 tags: [IPC,Binder] categories: [Mobile,Android] - ...

  5. dos2unix命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/leedaning/article/details/53024290 使用git 的时候碰到git将unix换行符转换为wi ...

  6. 学习记录 div悬停在顶部 。div阻止冒泡

    如何让一个div可点击,并且div里面的a元素也能点击? 楼主应该是想要这样的,阻止事件冒泡 点击里面的a的时候不触发外面的div的点击事件 <script type="text/ja ...

  7. C++ 函数 函数的重载 有默认参数的函数

    函数的重载 C++允许用同一函数名定义多个函数,这些函数的参数个数和参数类型不同.这就是函数的重载(function overloading). int max1(int a,int b, int c ...

  8. angualrJs指令起名的bug

    我在写一个demo时: <div ng-repeat="user in users" my-template2 my-template> //my-template2 ...

  9. 新的Calculator的规范作业

    附加作业题目 第三次作业 mygithub:sonnypp 这是开学来第一次写随笔,这一次的作业是对上一次作业的修改,对于上一次作业,在学长老师的帮助下,我重新修改了下代码,将.h文件分成了一个Sca ...

  10. 1001.A+B Format (20)的感受

    这是提交到Github的object-oriented文件夹里面的代码:https://github.com/sonnypp/object-oriented/tree/master/1001. 一.解 ...