<!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. JAVA-SpringMVC开发第一个应用

    找到eclipse工具路径 打开eclipse.exe 选择workspace的存放位置,点击ok 点击file-new 选择web-dynamic web project(动态web项目)-next ...

  2. Spring（十八）：Spring AOP（二）：通知（前置、后置、返回、异常、环绕）

    AspectJ支持5种类型的通知注解: @Before:前置通知,在方法执行之前执行: @After:后置通知,在方法执行之后执行: @AfterRunning:返回通知,在方法返回结果之后执行(因此 ...

  3. 转: xshell远程连接自动断开的问题解决办法

    转:http://blog.csdn.net/haijiaoqihao20160106/article/details/50623431 2.客户端的配置 Keep Alive修改.我的xshell的 ...

  4. IIS发布网站遇到 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary 编

    编译错误: 说明:在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息:CS0016: 未能写入输出文件“c:\Windows\Microso ...

  5. Web - TCP的三次握手

    在TCP/IP协议中,TCP协议提供可靠的连接服务,採用三次握手建立一个连接. 第一次握手:建立连接时,client发送syn包(syn=j)到server,并进入SYN_SENT状态,等待serv ...

  6. Solidworks直接打开SWB文件报错怎么办

       

  7. js未分类

    jQuery设置透明 1.直接.fadeIn 淡入 .fadeOut 淡出 .fadeTo(时间,"透明度") 2.addClass只能控制淡入和淡出,不能控制其速度. filte ...

  8. C#中将DLL文件打包到EXE文件

    1:在工程目录增加dll目录,然后将dll文件复制到此目录,例如: 2:增加引用,定位到工程的dll目录,选中要增加的dll文件 3:修改dll文件夹下面的dll文件属性 选中嵌入式资源,不复制. 4 ...

  9. vue循环中的v-show

    v-show如果使用循环对象的属性来时控制, 这个属性必须是加载时就存在的 <div class="list-group col-sm-12" v-for="(is ...

  10. vba 列转行

    Sub C2R() Dim RCount As Integer RCount = 2 Dim FillIn, FillIn2 Set FillIn = Worksheets("Fill-in ...