ReactJS学习笔记八:动画
来源:互联网 发布:linux更新系统 编辑:程序博客网 时间:2024/06/05 02:36
这里只讨论React的一个动画插件提供的动画机制,其他的通过自己写JS操作的动画都是一样的,和React没啥关系。
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; }
0 0
- ReactJS学习笔记八:动画
- ReactJS学习笔记:动画
- reactjs学习笔记1
- ReactJs学习笔记
- ReactJS学习笔记:表单
- reactjs学习笔记
- reactjs学习笔记
- 学习reactJS笔记
- Unity3D学习笔记(八)动画
- Unity3D学习笔记(八)动画
- cocos-lua学习笔记(八)帧动画
- ReactJS学习笔记七:表单
- 个人学习笔记 ReactJS part1
- ReactJS学习笔记六:感想
- ReactJS学习笔记七:表单
- reactjs学习笔记2--组件的介绍
- ReactJs笔记
- Unity3D学习笔记(八) 动画编辑器(animation窗口)
- this指针
- Hibernate-openSession与getCurrentSession区别
- 剑指offer-替换空格
- Makefile中常用的函数
- 使用ssh公钥密钥自动登陆linux服务器
- ReactJS学习笔记八:动画
- 黑马程序员——数组
- POJ 2785 4 Values whose Sum is 0(折半枚举)
- java SpringAOP拦截Controller,Service实现日志管理(自定义注解的方式)
- 【Effective C++ 读书笔记】条款03: 尽量使用 const
- 【c#第7次作业】学习体会
- MapReduce的模式、算法和用例
- IOS开发高效宏整理
- 频繁分配释放内存导致的性能问题的分析