React过渡动画组件基础使用介绍

import React, { Component } from 'react' // CSSTransition 让元素有过渡效果，CSSTransition的子元素只能是一个 import { CSSTransition } from 'react-transition-group' import './style/transistion.css' class App extends Component { state = { show: true } render() { const { show } = this.state return ( 
  this.setState(state => ({ show: !state.show }))}>显示/隐藏
 {/* 重要属性 timeout 组件动画时长 必须要有的属性，单位是ms ,真实的动画还得看写css的动画时间，也就是说这里的事件要和css中写的动画时间保持一致 in 动画开关，进场或出场  它的值是一个boolean，true：进入，false：退场 classNames 指定动画的样式名称或样式定义的前缀名  {}|string，这个属性可以防止重名 unmountOnExit 退场后，删除动画dom元素 appear 第1次，访问时如果in为true，进行的动画 */}  
 
我是内容
 ) } } export default App

/* 进场起始和出场结束，透明度都是0 */ .fade-enter, .fade-exit-done, .fade-appear { opacity: 0; /* transform: scale(.6); */ } /* 进场由0变为1的动画时间 */ .fade-enter-active, .fade-appear-active { opacity: 1; /* transform: scale(1); */ transition: opacity 300ms; } /* 出场由1变为0的动画时间 */ .fade-exit-active { opacity: 0; /* transform: scale(.6); */ transition: all 300ms; }

import React, { Component } from 'react' // CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个 import { CSSTransition } from 'react-transition-group' import 'animate.css' // 注意这个文件要放在animate.css的下面，防止覆盖 import './style/transistion.css' class App extends Component { state = { show: true } render() { const { show } = this.state return ( 
  this.setState(state => ({ show: !state.show }))}>显示/隐藏
 {/* 重要属性 timeout 组件动画时长 必须的属性  ms ,真实的动画还得看写css的动画时间 in 动画开关，进场或出场  boolean true进入 false退场 classNames 指定动画的样式名称或样式定义的前缀名  {}|string unmountOnExit 退场后，删除动画dom元素 */}  
 
我是内容
 ) } } export default App 

:root { /* 更改根节点中的元素的值 */ /* 动画持续时间 */ --animate-duration: 300ms; /* 动画延迟 */ --animate-delay: 300ms; } /* 进场起始和出场结束，透明度都是0 */ .fade-enter, .fade-exit-done, .fade-appear { opacity: 0; /* transform: scale(.6); */ } /* 进场由0变为1的动画时间 */ .fade-enter-active, .fade-appear-active { opacity: 1; /* transform: scale(1); */ transition: opacity 300ms; } /* 出场由1变为0的动画时间 */ .fade-exit-active { opacity: 0; /* transform: scale(.6); */ transition: all 300ms; }

import React, { Component } from 'react' // CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个 import { CSSTransition, TransitionGroup } from 'react-transition-group' import './style/transistion.css' class App extends Component { state = { todos: [] } render() { const { todos } = this.state return ( 
  {/* 使用了TransitionGroup组件，则里面的CSSTransition属性in无效，用要唯一不重复的key来代替换 */} {todos.map((item, index) => (  
 {item} { this.setState(state => ({ todos: state.todos.filter(val => val != item) })) }} > -- 删除  ))} 
 { this.setState(state => ({ todos: [...state.todos, Date.now() + ''] })) }} > 添加任务 
 ) } } export default App

:root { /* 更改根节点中的元素的值 */ /* 动画持续时间 */ --animate-duration: 300ms; /* 动画延迟 */ --animate-delay: 300ms; } /* 进场起始和出场结束，透明度都是0 */ .fade-enter, .fade-exit-done, .fade-appear { opacity: 0; /* transform: scale(.6); */ } /* 进场由0变为1的动画时间 */ .fade-enter-active, .fade-appear-active { opacity: 1; /* transform: scale(1); */ transition: opacity 300ms; } /* 出场由1变为0的动画时间 */ .fade-exit-active { opacity: 0; /* transform: scale(.6); */ transition: all 300ms; }

import React, { Component } from 'react' // CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个 import { CSSTransition, SwitchTransition } from 'react-transition-group' import './style/transistion.css' class App extends Component { state = { on: true } render() { const { on } = this.state return ( 
 {/* 动画切换的模式 in-out  先进入，再退出 out-in  先退出，再进入   默认值 */} {/*  */}  {/* 在SwitchTransition中它要想有动画，用key */}  
{on ? '你好' : '再见'}
 { this.setState(state => ({ on: !state.on })) }} > 改变 
 ) } } export default App

:root { /* 更改根节点中的元素的值 */ /* 动画持续时间 */ --animate-duration: 300ms; /* 动画延迟 */ --animate-delay: 300ms; } /* 进场起始和出场结束，透明度都是0 */ .fade-enter, .fade-exit-done, .fade-appear { opacity: 0; transform: scale(.6); } /* 进场由0变为1的动画时间 */ .fade-enter-active, .fade-appear-active { opacity: 1; transform: scale(1); transition: opacity 300ms,transform 300ms; } /* 出场由1变为0的动画时间 */ .fade-exit-active { opacity: 0; /* transform: scale(.6); */ transition: all 300ms; } 

import React, { Component } from 'react' import { Switch, Route, Link, withRouter } from 'react-router-dom' import { CSSTransition, TransitionGroup } from 'react-transition-group' import RenderCmp from './views/Render' import Login from './views/Login' @withRouter class App extends Component { render() { return ( 
 login -- render
 {/* 用 TransitionGroup 一包裹，就不用定义in属性了 */}  {/* 把路由地址当做唯一不可重复的key值 */}   
 ) } } export default App

:root { /* 更改根节点中的元素的值 */ /* 动画持续时间 */ --animate-duration: 300ms; /* 动画延迟 */ --animate-delay: 300ms; } /* 进场起始和出场结束，透明度都是0 */ .fade-enter, .fade-exit-done, .fade-appear { opacity: 0; transform: scale(.6); } /* 进场由0变为1的动画时间 */ .fade-enter-active, .fade-appear-active { opacity: 1; transform: scale(1); transition: opacity 300ms,transform 300ms; } /* 出场由1变为0的动画时间 */ .fade-exit-active { opacity: 0; /* transform: scale(.6); */ transition: all 300ms; } /* ---------------------------------- */ .router-enter { opacity: 0; } .router-enter-active { opacity: 1; transition: all 300ms; } .router-exit-active { opacity: 0; transition: all 0ms; }

import React, { Component } from 'react' import { Route, Link, withRouter } from 'react-router-dom' import RenderCmp from './views/Render' import Login from './views/Login' @withRouter class App extends Component { render() { return ( 
 login -- render
 {/* 这里用 children 渲染方式，因为这种渲染方式，无论路由是否匹配到，路由对应的组件都在，都在才能添加动画效果 */}  } />  } /> 
 ) } } export default App

import React, { Component } from 'react' import withTransition from '../../hoc/withTransition' @withTransition class Login extends Component { render() { return ( 
 
用户登录
 { sessionStorage.setItem('uid', 1) this.props.history.push('/render') }} > 登录一下 
 ) } } export default Login

import React, { Component } from 'react'; import { CSSTransition } from 'react-transition-group' const withTransition = Cmp => { return class extends Component { render() { return ( <> <> {this.props.match ?  : 
}  ); } } } export default withTransition

.router-enter { opacity: 0; } .router-enter-active { opacity: 1; transition: all 300ms; } .router-exit-active { opacity: 0; transition: all 0ms; }