如何在React中使用CSS3动画
一、需求
1.在页面添加item时要有渐变效果
2.单击item可删除，带渐变效果
二、代码
1.通过Reacat插件ReactCSSTransitionGroup实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>React动画</title>
<style>
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
} .example-enter.example-enter-active {
opacity: 1;
} .example-leave {
opacity: 1;
transition: opacity .5s ease-in;
} .example-leave.example-leave-active {
opacity: 0.01;
}
</style>
</head>
<body>
<script src="./react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
React.render(<TodoList></TodoList>, document.body);
</script>
</body>
</html>
三、运行结果
如何在React中使用CSS3动画的更多相关文章
- [Web 前端] 如何在React中做Ajax 请求？
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- 如何在react中使用decorator
2020-03-27 如何在react中使用decorator decorator目前都需要修改babel才能使用 说一下具体的操作方法 踩了一天的坑... 步骤1: yarn create reac ...
- javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- react中如何使用动画效果
在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...
- 如何在unity中使用龙骨动画
龙骨 龙骨是Egret公司的一个用来做动画的软件,本文分享一下如何在Unity2D中使用龙骨导出的2D动画 导出动画 在龙骨中文件->导出,导出动画数据和纹理到Unity的项目中,如果打包了的话 ...
- 如何在pyqt中实现带动画的动态QMenu
弹出菜单的视觉效果 QLineEdit 原生的菜单弹出效果十分生硬,而且样式很丑.所以照着Groove中单行输入框弹出菜单的样式和动画效果写了一个可以实现动态变化Item的弹出菜单,根据剪贴板的内容是 ...
- 前端必读2.0：如何在React 中使用SpreadJS导入和导出 Excel 文件
最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...
- react中使用css动画效果
index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...
- 如何在react中实现一个倒计时组件
倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...
随机推荐
- 从0零开始学slatstack-(0)在centos 6.5 安装 python2.7 salt
由于服务器环境问题,我的一个小玩意失败了,于是下决心学习下saltstack来弄个好使的自动化配置管理工具.之所以不考虑puppet等,主要原因是我不熟ruby,深入学习困难.再其次,为什么考虑2.7 ...
- 动画气泡指示当前滑动值--第三方开源--DiscreteSeekbar
DiscreteSeekbar在github上的项目主页是:https://github.com/AnderWeb/discreteSeekBar DiscreteSeekbar可以自定制的属性很多, ...
- SQLserver Delete from where 与Oracle delete from where 的差异
1.SQLserver 版本: select @@version; Microsoft SQL Server 2012 (SP1) - 11.0.3128.0 (X64) Dec 28 2012 20 ...
- 对现有Hive的大表进行动态分区
分区是在处理大型事实表时常用的方法.分区的好处在于缩小查询扫描范围,从而提高速度.分区分为两种:静态分区static partition和动态分区dynamic partition.静态分区和动态分区 ...
- 纯JS文本比较工具
前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...
- 流水线（pipe-line）简介
1.什么是流水线设计技术? 答:所谓流水线设计实际上是把规模较大.层次较多的组合逻辑电路分为几个级,在每一级插入寄存器组并暂存数据. K级就是有K个寄存器组,从上到下没有反馈电路. 2.流水线设计的深 ...
- android 弹出框(输入框和选择框)
1.输入框: final EditText inputServer = new EditText(this); inputServer.setFilters(new InputFilter[]{new ...
- Ffmpeg 定位文件（seek file）
有朋友问到ffmpeg播放文件如何定位问题,我想到应该还有一些新手朋友对这一块比较陌生.ffmpeg定位问题用到seek方法,代码 如下: void SeekFrame(AVFormatContext ...
- tomcat 优化实记
好记性不如烂笔头,以下是 tomcat 无脑优化 1.内存设置(VM参数调优)(1). Windows环境下,是tomcat解压版(执行startup.bat启动tomcat) 解决办法:修改“%T ...
- 编写一个小程序，从标准输入读入一系列string对象，寻找连续重复出现的单词。程序应该找出满足一下条件的单词：该单词的后面紧接着再次出现自己本身。跟踪重复次数最多的单词及其重复次数,输出.
// test13.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...