ReactJS学习笔记:动画
2016-05-17 16:04
761 查看
这里只讨论React的一个动画插件提供的动画机制,其他的通过自己写JS操作的动画都是一样的,和React没啥关系。
React.addons.CSSTransitionGroup 提供了一个分组动画,所谓分组动画就是指它可以对一个数组中的元素的增加和减少做一个动画。
比如我们通过一个数组来渲染一个列表,那么当列表增加或者减少的时候我们可以定义他的动画。
当增加一项时,会自动在增加的那一项上增加两个类:
当减少一项时,会自动在删除之前增加一个
所以可以通过CSS3来写动画。
下面是JSX代码:
下面是css代码:
React.addons.CSSTransitionGroup 提供了一个分组动画,所谓分组动画就是指它可以对一个数组中的元素的增加和减少做一个动画。
比如我们通过一个数组来渲染一个列表,那么当列表增加或者减少的时候我们可以定义他的动画。
动画原理
React.addons.CSSTransitionGroup的原理非常简单,通过
CSSTransitionGroup标签来指定对一个DOM列表进行动画操作,通过
transitionName='my-animate-name'来指定动画的名称。
当增加一项时,会自动在增加的那一项上增加两个类:
{name}-enter和
{name}-enter-active。CSS动画执行结束之后这两个类会被删掉。其中
{name}-enter会在
{name}-enter-active的前一帧被加上。因此
{name}-enter用来定义动画的初始状态,
{name}-enter-active用来定义动画的结束状态。
当减少一项时,会自动在删除之前增加一个
{name}-leave和
{name}-leave-active类,这俩着的区别和前面的是一样的。
所以可以通过CSS3来写动画。
简单示例
我们来写一个简单的动画示例。显示一个学生列表,然后定时增加一条,在增加的时候使用一个fade动画。点击的时候做一个放大并渐变的消失动画:下面是JSX代码:
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var Students = React.createClass({ getInitialState: function() { return { students: ['amy', 'bob', 'tom', 'lucy'] }; }, componentDidMount: function() { var self = this; var update = function() { self.setState({ students: self.state.students.concat(["unamed-"+parseInt(Math.random()*10000000)]) }); } setInterval(update, 1000); }, handleRemove: function(e) { var name = $(e.target).data("name"); var index = 0; var students = this.state.students; for(var i=0;i<students.length;i++) { if(students[i] == name) index = i; } var state = this.state.students.splice(index, 1); this.setState({ state: state }); }, render: function() { var s = this.state.students; var self = this; return ( <div> <ReactCSSTransitionGroup transitionName="student"> { s.map(function(d, i) { return <div className='student' key={d}>{d} <a onClick={self.handleRemove} data-name={d}>删除</a></div> }) } </ReactCSSTransitionGroup> </div> ); } }); React.render( <Students />, document.getElementById("div1") );
下面是css代码:
.student { float: left; margin: 20px; } .student-enter { opacity: .2; transition: opacity 1s; } .student-enter-active { opacity: 1; } .student-leave { transform: scale(1); opacity: 1; transition: all .5s ease-in; } .student-leave-active { transform: scale(5); opacity: 0; }
相关文章推荐
- ReactNative 从环境和第一个demo说起,填坑教程
- React Native 代码片段
- React Native-目前最火的前端技术?
- react.js 之 批量添加与删除功能
- 如何创建第一个React Native android应用
- React Native 实例 - BBC新闻客户端
- ReactiveCocoa基础和一些常见类介绍
- 配置redux react 以及webpack
- 在Windows下搭建React Native Android开发环境
- React入门教程(二)
- ReactNative 第四节 实例开发
- React/React Native 的ES5 ES6写法对照表
- [转] 在React Native中使用ART
- react-native学习之环境安装
- Reactive Cocoa详解(1)----神奇的RAC宏
- React 组件的生命周期
- 在Mac上搭建React Native开发环境(iOS && Android)
- React入门教程(一)——JSX学习篇
- Windows搭建安装React Native环境配置
- Material-UI + React + Babel + Webpack 环境配置