如何在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 ...
随机推荐
- 左右滑动删除ListView条目Item--第三方开源--SwipeToDismiss
Android的SwipeToDismiss是github上一个第三方开源框架(github上的项目链接地址:https://github.com/romannurik/Android-SwipeTo ...
- 基于Redis主从复制读写分离架构的Session共享
1.搭建主从复制 第一步:将Redis拷贝到虚拟机上的指定文件夹内,此Redis作为主服务 第二步:将Redis拷贝到本机的指定文件夹内,此Redis作为从服务 第三步:修改主服务的配置文件(redi ...
- Nginx+Tomcat动静分离
需求:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...
- NGUI3.5系列教程之 一些小功能的实现
(一)可拖动窗体的实现: 1:添加一个Sprite为鼠标点击区域,改名为:DragSprite 2:给DragSprite添加Collider 3:给DragSprite添加Drag Object , ...
- ASP.NET Web – 输入的有效性验证
下面这个示例显示了与文本框textFirstname相关的验证控件RequiredFieldValidator.所有的验证控件都有ErrorMessage和ControlToValidate属性.如果 ...
- ORACLE 变量定义
DECLARE v_productid productinfo.productid%TYPE; v_productname ); v_productprice ,); v_quantity ); v_ ...
- bnuoj 4207 台风（模拟题）
http://www.bnuoj.com/bnuoj/problem_show.php?pid=4207 [题意]:中文题,略 [题解]:模拟 [code]: #include <iostrea ...
- 【转】jquery-取消冒泡
转自:http://blog.163.com/css_mm/blog/static/209182176201262665157634/ 1.通过返回false来取消默认的行为并阻止事件起泡. jQue ...
- 输入adb shell 时 提示error: more than one device and emulator
第一种情况:确实用多个设备或者模拟器 解决办法:(指定连接某一个设备或者模拟器) 1.获取模拟器/设备列表 adb devices 2.指定device来执行adb shell adb -s ...
- UEFI+GPT 修复 win10启动
要修复引导文件大致有以下几个步骤(按照我自己修复的步骤来的,其他情况可结合上面参考资料探索,大体思路应该没有变化): 挂载ESP分区 由于我的windows8.1已经无法进入了,Ubuntu不知道能不 ...