一、需求

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动画的更多相关文章

  1. [Web 前端] 如何在React中做Ajax 请求？

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  2. 如何在react中使用decorator

    2020-03-27 如何在react中使用decorator decorator目前都需要修改babel才能使用 说一下具体的操作方法 踩了一天的坑... 步骤1: yarn create reac ...

  3. javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  4. react中如何使用动画效果

    在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...

  5. 如何在unity中使用龙骨动画

    龙骨 龙骨是Egret公司的一个用来做动画的软件,本文分享一下如何在Unity2D中使用龙骨导出的2D动画 导出动画 在龙骨中文件->导出,导出动画数据和纹理到Unity的项目中,如果打包了的话 ...

  6. 如何在pyqt中实现带动画的动态QMenu

    弹出菜单的视觉效果 QLineEdit 原生的菜单弹出效果十分生硬,而且样式很丑.所以照着Groove中单行输入框弹出菜单的样式和动画效果写了一个可以实现动态变化Item的弹出菜单,根据剪贴板的内容是 ...

  7. 前端必读2.0：如何在React 中使用SpreadJS导入和导出 Excel 文件

    最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...

  8. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

  9. 如何在react中实现一个倒计时组件

    倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...

随机推荐

  1. Cassandra1.2文档学习解读计划——为自己鼓劲

    最近想深入研究一下Cassandra,而Cassandra没有中文文档,仅有的一些参考书都是0.7/0.6版本的.因此有个计划,一边学习文档(地址:http://www.datastax.com/do ...

  2. Hello，cnblog。

    This my blog 

  3. C++ socket编程

    源代码项目下载:http://download.csdn.net/detail/mmyzlinyingjie/7049499 TCP类的: TcpServer.cpp //WSAStartup soc ...

  4. Python脚本控制的WebDriver 常用操作 <十六> 处理对话框

    下面将使用webdriver来处理一些页面跳出的对话框事件 测试用例场景 页面上弹出的对话框是自动化测试经常会遇到的一个问题.前端框架的对话框经常是div形式的,下面是一些常见的对话框操作事件: 打开 ...

  5. 每日一“酷”之array

    array--国定类型数据序列 array模块定义一个序列数据结构,看起来和list非常相似,只不过所有成员都必须是相同的基本类型. 1.初始化 array实例化时可以提高一个参数来描述允许哪个种数据 ...

  6. swap分区添加

    首先你需要使用命令:dd 来创建一个swapfile,然后你需要使用mkswap命令在设备或者文件中创建一个Linux swap分区a) 使用root用户登陆b) 使用下面的命令创建一个2G的 Swa ...

  7. MySQL SHOW 语句大全

    常用的mysql show命令如下: 1.show databases;        显示mysql中所有数据库 2.show tables [from databases] ;     显示当前数 ...

  8. SQL2012 附加数据库提示5120错误解决方法

    在win8.1 x64系统上使用sql2012进行附加数据库(包括在x86系统正在使用的数据库文件,直接拷贝附加在X64系统中)时,提示无法打开文件,5120错误. 这个错误是因为没有操作权限,所以附 ...

  9. javascript中出现identifier starts immediately after numeric literal错误原因以及解决方法

    javascript遇到参数是字符型和数字型组合的参数就会出现这种错误,例如alert(1);可以正確輸出alert(str);就會報錯alert("str");可以正確輸出.

  10. LCA专题

    标签(空格分隔): LCA 我的个人网站挂了,最近就先用这个来写博客吧.以后争取在这个网站写一些与OI无关的个人爱好的东西. 题目来源:code[VS] 倍增--在线算法 用 $f[i][j]$ 记录 ...