ReactCSSTransitionGroup

  ReactCSSTransitionGroup is a high-level API based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM.

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>

  You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

  

参考:https://facebook.github.io/react/docs/animation.html#getting-started

ReactCSSTransitionGroup的更多相关文章

  1. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  2. 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

    1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...

  3. React 附件动画API ReactCSSTransitionGroup

    React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...

  4. React-router4 第八篇 ReactCSSTransitionGroup 动画转换

    https://reacttraining.com/react-router/web/example/animated-transitions 动画转换这么高级,其实是又引入了一个组件,没什么特别, ...

  5. react动画难写?试试react版transformjs

    简介 transformjs在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的.junexie童鞋已经造了个react版本. 动画实现方式 传统 web 动画的两种方式: ...

  6. css/js(工作中遇到的问题)-4

    JS生成随机的由字母数字组合的字符串 Math.random().toString(36).substr(2)

  7. React官网学习笔记

    欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须 ...

  8. React-Router学习整理

    欢迎大家指导与讨论 : ) 一.前言 本文摘要:react-router的基本用法,动画效果与路由,路由权限控制,路由离开确认,根据路由切分的按需加载,路由组件的属性.本文是笔者在学习时整理的笔记,由 ...

  9. 【总结】总结写了3个React页面后遇到的各种坑

    标签里用到<label for>的,for 要写成htmlFor 标签里的class要写成className 组件首字母一定要大写 单标签最后一定要闭合 如果html里要空格转义, 注意不 ...

随机推荐

  1. 【Social listening实操】从社交媒体传播和文本挖掘角度解读《欢乐颂2》

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 作为数据分析爱好者,本文作者将想从数据的角度去解读< ...

  2. 1. 配置win7下odbc数据源找不到数据库驱动的问题

    win7下ODBC数据源DB2的链接 直接在控制面板---管理工具----数据源(ODBC) 打开数据源配置,发现只有SQLServer的驱动,其他的都没有了. 解决方法是C:\Windows\Sys ...

  3. Linux 配置开机自启 和 修改环境变量

    [ 操作系统 Centos7 ] 一,开机自动启动的配置 1,赋予 /etc/rc.local 的执行权限 => chmod +x /etc/rc.local 2,在 /etc/rc.local ...

  4. CKEditor 5

    1.官网 https://ckeditor.com/ckeditor-5/download/ 2.

  5. delphi android 自动升级

    用IdHTTP1下载文件到手机完成. 调用自动安装不行. First chance exception at $DFC22519. Exception class EJNIException with ...

  6. linux crontab 保证php守护进程运行

    写好php脚本.建议定期检测内存占用,核心逻辑就不写了.这个跟业务有关. if(memory_get_usage()>100*1024*1024){ exit(0);//大于100M内存退出程序 ...

  7. centos7 自动定时备份mysql数据库

    shell脚本:mysqlbak.sh #!/bin/bashPATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbinexpo ...

  8. Leetcode 题解 reverse List II

    这个题确实太容易错了. 我已经做了2遍了,之前都是套用reverse List 1中的函数. 现在尝试用新方法,在一个函数里完成,结果又错了. 事实证明,永远不要想当然!!!白板编程真的是要求,你对每 ...

  9. 一个Tparams小测试

    var aParams: TParams; aPar: TParam; I:Integer; begin aParams := TParams.Create(nil); aPar := aParams ...

  10. unity Flash Animation Toolset插件使用

    插件网站:http://matov.me/flash-animation-toolset/ 1.在unity上打开资源商店,Window -> Asset Store -> 搜索Flash ...