ReactJS学习笔记八:动画
ReactJS学习笔记八:动画
目录(?)[+]
这里只讨论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;}
版权声明:本文为博主原创文章,未经博主允许不得转载。
转载于:https://www.cnblogs.com/HuiLove/p/4849549.html
ReactJS学习笔记八:动画相关推荐
- ReactJS学习笔记——npm、JSX、webpack
2019独角兽企业重金招聘Python工程师标准>>> #ReactJS学习笔记--npm.JSX.webpack [toc] React是一个JavaScript库文件,使用它的目 ...
- 【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
- python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑
python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑 许多人在安装Python第三方库的时候, 经常会为一个问题困扰:到底应该下载什么格式的文件? 当我们点开下载页时, 一 ...
- android学习笔记---55_frame动画的实现,Java技术qq交流群:JavaDream:251572072
android学习笔记---55_frame动画的实现,Java技术qq交流群:JavaDream:251572072 Java技术qq交流群:JavaDream:251572072 2013/5/1 ...
- ROS学习笔记八:创建ROS msg和srv
ROS学习笔记八:创建ROS msg和srv 本节主要讲述了如何创建和建立ROS msg和srv,同时使用命令行工具rosmsg.rossrv和roscp. msg和srv简介 msg:描述ROS m ...
- unity2D学习笔记-角色动画
unity2D学习笔记-角色动画 角色移动 动画效果(重点!!!!!) 创建:Animator与Animation 状态转换 跳跃 从fall到idle Hierarchy中创建一个Sprite作为载 ...
- Halcon 学习笔记八:颜色识别
Halcon 学习笔记八:颜色识别 一.图像处理需要的知识 二.图像处理的预处理和分割过程 二.颜色识别的方法 三.例子一 四.例子二 五.例子三 一.图像处理需要的知识 1.图像处理基础(rgb(h ...
- ZooKeeper学习笔记(八):ZooKeeper集群写数据原理
写数据原理 写流程直接请求发送给Leader节点 这里假设集群中有三个zookeeper服务端 ACK (Acknowledge character)即是确认字符,在数据通信中,接收站发给发送站的一种 ...
- MongoDB 学习笔记八 复制、分片、备份与恢复、监控
MongoDB 学习笔记八 复制.分片.备份与恢复.监控 MongoDB复制(副本集) 什么是复制? MongoDB 复制原理 MongoDB 副本集设置 副本集添加成员 MongoDB 分片 分片 ...
最新文章
- 10大类、142条数据源,中文NLP数据集线上搜索开放
- java win8 mac地址_Windows8系统下MAC地址修改方法图文教程
- Problem - 3936 FIB Query
- 计算机网络安全顾问啊,【网络安全咨询顾问工作内容|工作职责|网络安全咨询顾问做什么】-看准网...
- 【转】BPM与ERP,OA系统的区别和关系
- 历代CPU最全明细参数表
- flexigrid参数API
- ##CSP 201812-2 小明放学(C语言)(100分)
- Java Web(一) Servlet详解!!
- 每天一道剑指offer-二进制中1的个数
- 阶段1 语言基础+高级_1-3-Java语言高级_07-网络编程_第2节 TCP协议_1_TCP通信的概述(上)...
- 软件工程基础知识--需求分析
- 用java编写简单的仓库管理_仓库管理系统+可视化界面java编写
- WPS:WPS的论文使用技巧之成功解决如何在尾注设置的参考文献后添加致谢、附录等章节(图文教程)
- 使用DDE传输数据至SQL Server
- python数字类型中包含了哪三种类型_Python数字类型中包含了________、________和_________三种类型。...
- 阈的粤语发音_新编粤语读音字典 - 粤语 | Cantonese | 白话 - 声同小语种论坛 - Powered by phpwind...
- 【思前享后】区块链应用
- c++ 小游戏 NO6 跑酷游戏
- Unity Shader - Planar Shadow - 平面阴影