https://reacttraining.com/react-router/web/example/animated-transitions

动画转换这么高级,其实是又引入了一个组件,没什么特别,

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // 就是他。。效果就是内容变化后,有一点点动画效果,
import {
BrowserRouter as Router,
Route,
Link,
Redirect
} from 'react-router-dom' /* you'll need this CSS somewhere // 就是这些css样式
.fade-enter {
opacity: 0;
z-index: 1;
} .fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 250ms ease-in;
}
*/ const AnimationExample = () => (
<Router>
<Route render={({ location }) => (
<div style={styles.fill}>
<Route exact path="/" render={() => (
<Redirect to="/10/90/50"/>
)}/> <ul style={styles.nav}>
<NavLink to="/10/90/50">Red</NavLink>
<NavLink to="/120/100/40">Green</NavLink>
<NavLink to="/200/100/40">Blue</NavLink>
<NavLink to="/310/100/50">Pink</NavLink>
</ul> <div style={styles.content}>
<ReactCSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={300} // 入场动画时间
transitionLeaveTimeout={300} // 出场动画时间
>
{/* no different than other usage of
ReactCSSTransitionGroup, just make
sure to pass `location` to `Route`
so it can match the old location
as it animates out
*/}
<Route
location={location}
key={location.key}
path="/:h/:s/:l"
component={HSL}
/>
</ReactCSSTransitionGroup>
</div>
</div>
)}/>
</Router>
) const NavLink = (props) => (
<li style={styles.navItem}>
<Link {...props} style={{ color: 'inherit' }}/>
</li>
) const HSL = ({ match: { params } }) => (
<div style={{
...styles.fill,
...styles.hsl,
background: `hsl(${params.h}, ${params.s}%, ${params.l}%)` // ES6的模板字符串
}}>hsl({params.h}, {params.s}%, {params.l}%)</div>
) const styles = {} styles.fill = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
} styles.content = {
...styles.fill,
top: '40px',
textAlign: 'center'
} styles.nav = {
padding: 0,
margin: 0,
position: 'absolute',
top: 0,
height: '40px',
width: '100%',
display: 'flex'
} styles.navItem = {
textAlign: 'center',
flex: 1,
listStyleType: 'none',
padding: '10px'
} styles.hsl = {
...styles.fill,
color: 'white',
paddingTop: '20px',
fontSize: '30px'
} export default AnimationExample

React-router4 第八篇 ReactCSSTransitionGroup 动画转换的更多相关文章

  1. 第八篇 SQL Server安全数据加密

    本篇文章是SQL Server安全系列的第八篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

  2. 【译】第八篇 SQL Server安全数据加密

    本篇文章是SQL Server安全系列的第八篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

  3. Bodymovin:Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  4. NHibernate 数据查询之Linto to NHibernate (第八篇)

    NHibernate 数据查询之Linto to NHibernate (第八篇) 刚学NHibernate的时候觉得,HQL挺好用的,但是终归没有与其他技术 相关联,只有NHibernate用到,一 ...

  5. React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  6. [转]React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  7. Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期

    一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...

  8. iOS开发UI篇—核心动画(UIView封装动画)

    iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画 ...

  9. iOS开发UI篇—核心动画(转场动画和组动画)

    转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...

随机推荐

  1. linux 6.5上创建新用户后,不能登陆?

    linux 6.5上创建新用户后,不能登陆? 使用root账户登陆却可以! [root@ log]# useradd mtdk[root@ log]# echo 123abc |passwd --st ...

  2. mongodb 超出内存限制

    mongodb 查询数据默认占用最大内存为100M,如果查询涉及到大量数据进行$group.$sort时会抛出类似以下的异常: Received error :: { $err: \"Exc ...

  3. vue1 & vue2 数据驱动更新视图机制对比

    vue1 小粒度更新,精确追踪到数据变化所影响的dom变化,精确更新变化的dom 具体实现为,维护 observer watcher directive 三个类 ·observer负责监听数据变化,并 ...

  4. TypeScript type 类型别名

    //6,类型别名 /**类型别名不能出现在声明右侧的任何地方. * 接口 vs. 类型别名 * 另一个重要区别是类型别名不能被extends和implements(自己也不能extends和imple ...

  5. OpenStack Q版本新功能以及各核心组件功能对比

    OpenStack Q版本已经发布了一段时间了.今天, 小编来总结一下OpenStack Q版本核心组件的各项主要新功能, 再来汇总一下最近2年来OpenStack N.O.P.Q各版本核心组件的主要 ...

  6. QQ第三方登录(预备节)

    第一次很多时候,用户因为复杂的注册程序,而不愿意再体验我们的网站服务,我们可以通过QQ第三方授权,这样既保证了用户数,而且也极大的提高了用户体验.废话就不多说了,直接进入正题... 要实现QQ第三方登 ...

  7. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  8. leetcode1032

    class StreamChecker: def __init__(self, words: 'List[str]'): self.maxLen = 0 self.List = set(words) ...

  9. CSS vertical-align属性详解

    . 首页 博客园 联系我 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. 留言评论 返回顶部 前言:关于vertical-align属性 vertical-ali ...

  10. PL2303 USB转串口 com

    PL2303 USB转串口 com PL-2303 XA/HXA chip http://www.prolific.com.tw/US/ShowProduct.aspx?p_id=225&pc ...