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. 剑指Offer(三):从尾到头打印链表

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...

  2. Linux中使用python测试主机存活 Linux系统CentOS Linux release 7.3.1611 (Core) py版本Python 2.7.5

    下面是最初的情况 #/usr/bin/env python # -*- coding: utf-8 -*- import os import time import subprocess import ...

  3. Git工作流基础简介【与产品经理.jpg】

    基于可视化界面的操作可使用Sourcetree这个软件进行操作. 下面将描绘的几个命令主要是 git init git add git commit git status git reset HEAD ...

  4. 《算法》第五章部分程序 part 2

    ▶ 书中第五章部分程序,包括在加上自己补充的代码,字符串高位优先排序(计数 + 插排),(原地排序),(三路快排,与前面的三路归并排序相同) ● 计数 + 插排 package package01; ...

  5. Jenkins 简单配置

      安装就不说了, 因为安装实在是很简单的. Jenkins基础配置 配置jdk 和maven 进入Global Tool Configuration, 配置JDK: 一般不要选择自动安装, 否则下载 ...

  6. 电脑IP设置

    方法一: echo offecho 修改[本地连接]IP......netsh interface IP set address "本地连接" static 138.8.8.111 ...

  7. java用Thread方式创建多线程

    进程:一个正在执行的程序,每一个进程都有一个执行顺序,该顺序是一个执行路径,或者叫一个控制单元.线程:进程中一个独立的控制单元.线程控制着进程的执行.一个进程中至少有一个线程. java VM中至少有 ...

  8. js 正则函数初级

    1.test :正则匹配字符串,如果成功则返回true,若果失败则返回false 格式:/正则表达式/.test(字符串) 默认吗匹配规则,区分大小写:如果不区分大小写,则加修饰符 i 例子: < ...

  9. SpringMVC是单例的

    spring的controller是单例还是多例,结果我傻逼的回答当然是多例,要不然controller类中的非静态变量如何保证是线程安全的,这样想起似乎是对的,但是不知道(主要是我没看过spring ...

  10. 重建redo文件

    需求背景 由于前期安装oracle时redo文件大小或者路径规划不合理需要进行修改,以便满足性能测试要求.redo文件规划大小建议与生产环境一致. 重做日志相关数据字典 1.v$log  记录数据库中 ...