react|react-transition-group小结 react|react

在vue中想要实现动画效果，Vue 提供了 transition 的封装组件。通过过渡类名来实现过渡效果，react虽然没有封装组件，但他的生态圈也足够大，react-transition-group可以帮我们实现动画效果，原理差不多。上手也很简单。

// 首先安装 # npm npm install react-transition-group --save# yarn yarn add react-transition-group

import React,{Component} from 'react'; import './style.css' import { CSSTransition,TransitionGroup } from 'react-transition-group'; import uuid from 'uuid'

react-transition-group有三种组件 Transition CSSTransition TransitionGroup Transition是把css样式融入js来写，使用重点介绍后面两种

CSSTransition

【react|react-transition-group小结】元素组件的显示和隐藏
注意：使用时保证组件同时存在，利用in属性控制组件的显示和隐藏。所以当我们在路由组件中想要使用动画时，不能在外包Switch，因为使用Switch一次只会出现一个组件，同时Route的属性不能用component 要用 children，再利用in来判断出不出现该组件。并给CSSTransition加上onmountExit = {true} mountEnter = {true}

class Example extends Component { constructor (props) { super(props) this.state = { isShow : true } } render() { let {isShow} = this.state return( {// 写成一个函数时可以接受状态 //一共有四个状态 entering, entered, exiting, exited (state) => (Hello World -- {state} ) } {console.log(this.state.isShow)} ) }}

TransitionGrop
针对的是列表元素的新增和删除的动画

class Example extends Component { state = { isShow: true, items: [ {id: uuid(), text: 'Hello World'}, {id: uuid(), text: 'Hello React'}, ] } render() { let {isShow} = this.state return( { this.state.items.map(item => { return ( { (state) => ({item.text} -- {state} ) } ) }) } ) }}

附：css样式

.msg-enter,.msg-appear { opacity: 0; } .msg-enter-active,.msg-appear-active { opacity: 1; transition: all 300ms ease-out; } .msg-enter-done { opacity: 1; } .msg-exit { opacity: 1; } .msg-exit-active { opacity: 0; transition: all 300ms ease-out; } .msg-exit-done { opacity: 0; }