官方提供了react-transition-group库来实现过渡动画，与vue官方提供的transition很类似，利用它实现过渡动画。
一、安装
npm: npm install react-transition-group --save
yarn: yarn add react-transition-group
二、使用
官网给出了4种API，分别是 Transition 、CssTransition 、SwitchTransition 、TransitionGroup，今天我们主要使用CssTransition与TransitionGroup
CssTransition
被包裹dom在出现、进入、退出阶段利用CssTransition提供的classNames激活CSS动画
参数：in, timeout, unmountOnExit, classNames, onEntered，onExited，用法同Transition
案例：
import React, { Component } from 'react'import '../../index.css'import { CSSTransition } from 'react-transition-group'export default class AnimationByCss extends Component {constructor(props){super(props)this.state = {show:false}}hander = () => {this.setState({show:!this.state.show})}render() {let { show } = this.statereturn (<div><div className='shoppingCart_button' onClick={() => this.handler()}>{show ? '执行出场动画' : '执行入场动画'}</div><CSSTransitionin={this.state.show} // 如果this.state.show从false变为true，则动画入场，反之出场动画timeout={1000} //动画执行1秒classNames='fade' //自定义的class名unmountOnExit // 当动画出场后在页面上移除包裹的dom节点onEntered={(el) => { }} // 入场动画执行完毕的回调onExited={(el) => { }} // 出场动画执行完毕的回调><div className='main'></div></CSSTransition></div>)}}// index.css:body {margin: 0;padding: 0;font-family: sans-serif;}.shoppingCart_button {width: 100px;padding: 10px 10px;border: 1px #eee solid;cursor: pointer;user-select: none;margin-bottom: 50px}/*被执行元素默认样式*/.main {opacity: 0;transform: translateX(200px);transition: all 0.5s linear;width: 400px;height: 400px;background-color: #000;border: 1px #eee solid;border-radius: 10px}/*enter：入场前*/.fade-enter {opacity: 0;}/*enter-active：入场后到入场结束*/.fade-enter-active {transform: translateX(0px);opacity: 1;}/*enter-done：入场动画执行完毕后，保持状态*/.fade-enter-done {transform: translateX(0px);opacity: 1;}/*enter：出场前*/.fade-exit {opacity: 1;}/*enter-active：出场后到出场结束*/.fade-exit-active {transform: translateX(200px);opacity: 0;}/*enter-done：出场动画执行完毕后，保持状态*/.fade-exit-done {opacity: 0;}
TransitionGroup
列表形态的动画：如果页面上一组dom都需要添加动画效果，在最外面再加一个TransitionGroup即可
案例：
import React, {Component} from 'react'import '../../index.css'import { TransitionGroup, CSSTransition } from 'react-transition-group'export default class ShoppingCart extends Component {constructor(props) {super(props)this.state = {list: [{text: 'Vue'}, {text: 'React'}, {text: 'Angular'}]}}// ADDadd = () => {let result = window.prompt('Add')if (result){this.setState({list:[...this.state.list,{text:result}]})}}// deletedeleteItem = (index) => {this.state.list.splice(index,1)this.setState(['list'])}render() {let { list } = this.statereturn (<div style={{paddingLeft: '100px'}}><div className='shoppingCart_button' onClick={() => this.add()}>Add item ...</div><TransitionGroup>{list.map((item, index) => (<CSSTransitionkey={item.text}timeout={500} //动画执行1秒classNames='fade' //自定义的class名><div className='todo_list' onClick={() => this.deleteItem(index)}><div className='todo_item'>{item.text}</div></div></CSSTransition>))}</TransitionGroup></div>)}}// index.css:.todo_list {transition: all 0.3s linear;width: 400px;height: 40px;line-height: 40px;text-align: center;border: 1px #999 solid;border-radius: 10px;margin-bottom: 10px;background-color: #000000;box-shadow: 1px 1px 5px 0 #000;color: #fff;}/*enter：入场前*/.fade-enter {transform: translateX(300px);opacity: 0;}/*enter-active：入场后到入场结束*/.fade-enter-active {transform: translateX(0px);opacity: 1;}/*enter-done：入场动画执行完毕后，保持状态*/.fade-enter-done {transform: translateX(0px);opacity: 1;}/*enter：出场前*/.fade-exit {opacity: 1;}/*enter-active：出场后到出场结束*/.fade-exit-active {transform: translateX(200px);opacity: 0;}/*enter-done：出场动画执行完毕后，保持状态*/.fade-exit-done {opacity: 0;}
根据上面的 CSS 过渡动画效果，下篇文章准备实现：利用 react-transition-group 实现APP路由切换翻页动画…
如果觉得《利用React官网动画库（react-transition-group）实现过渡动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
