<!DOCTYPE html>

<html>

    <head>

        <title>React JS</title>

        <script src="../build_0.13/react.js"></script>

        <script src="../build_0.13/JSXTransformer.js"></script>

        <script src="../build_0.13/react-with-addons.min.js"></script>

        <style type="text/css">

            .example-enter{color:red;}

            .example-active{color:green;}

        </style>

    </head>

    <body>

        <div id="example" ></div>

        <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 />, document.getElementById('example') );

        </script>

    </body>

</html>

React(0.13) 定义一个使用动画的更多相关文章

  1. React(0.13) 定义一个checked组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. React(0.13) 定义一个多选的组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  3. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  4. React(0.13) 定义一个input组件，使其输入的值转为大写

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  5. React(0.13) 定义一个动态的组件(注释，样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  7. React(0.13) 定义一个动态的组件

    1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. React(0.13) 利用componentDidMount 方法设置一个定时器

    <html> <head> <title>hello world React.js</title> <script src="build ...

随机推荐

  1. Windows server 2008 R2如何预览图片而不是显示图标？

      Previews of media files are disabled by default in Windows Server 2008. In this article we will en ...

  2. [Spring Boot] Use Component Scan to scan for Bean

    Component Scan is important concept when we want to create Bean. Currently we know what, for the cla ...

  3. DISQLite3在XE4中的安装

    时隔这么久,因为工作中需要将一些图片序列文件进行分析,然后将结果进行分组统计,而分组统计用SQL语法很容易实现,但是要求程序运行的环境中安装有庞大的数据库系统,经过网上的寻找,终于发现了SQLite. ...

  4. ivr

    /************************************************************* 北京高阳圣思园信息技术有限公司IVR业务: 流程说明:公司介绍子流程 发布 ...

  5. 微信小程序 - scroll-into-view（提示）

    scroll-view的参数scroll-into-view适用于索引以及回到顶部 .详情见官方文档scroll-view: 点击下载:scroll-into-view示例

  6. JetBrains中配置注释与代码对齐的方法

    一.解决方案

  7. 保密员(baomi)

    #include<iostream> #include<string> #include<stdio.h> #include<algorithm> #i ...

  8. pip安装psutil模块时候报错：yum install python-devel mysql-devel zlib-devel openssl-devel

    yum install python-devel mysql-devel zlib-devel openssl-devel [root@localhost software]# pip install ...

  9. JSON语言规范与Java中两种解析工具基本使用

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6652250.html  一:JSON语言规范 一言以蔽之:“一个 :一个键值对,一个{}一个对象,一个[]一个 ...

  10. SpringCloud中eureka配置心跳和剔除下线的服务的时间

    在默认的springCloud中eureka注册中心在服务下线时表现的非常不灵敏,用惯了dubbo的zk注册中心表示很不习惯,eureka设计的本意是在服务不会频繁上下线和网络稳定的内网,这种设计在生 ...