React-transition-group

React 过渡动画插件

react-transition-group 插件是 React 的 Animation Add-Ons（ReactTransitionGroup 和 ReactCSSTransitionGroup）拆分出来的插件，是 React 动画库的重要组成部分

装包

  1. npm install react-transition-group --save

使用

根据组件内部 state 的改变来触发组件的动画处理

导入

首先导入使用的 Components ，这里我们使用 CSSTransitionGroup

  1. import { CSSTransitionGroup } from 'react-transition-group'

创建 state

创建一个空的 item 状态来添加出现的动画组件

  1. constructor(){
  2.   super()
  3.   this.state = {
  4.     item: [{name:'yu'}]
  5.   }
  6. }

添加 CSS

  1. /* react-transition-group custom */
  2. .example-enter {
  3.   opacity: 0.01;
  4. }
  6. .example-enter.example-enter-active {
  7.   opacity: 1;
  8.   transition: opacity 500ms ease-in;
  9. }
  11. .example-leave {
  12.   opacity: 1;
  13. }
  15. .example-leave.example-leave-active {
  16.   opacity: 0.01;
  17.   transition: opacity 300ms ease-in;
  18. }

添加动画需要的组件

给需要触发动画的 Dom 添加并监听事件，添加动画组件<CSSTransitionGroup>，使其点击<button>按钮添加 items 插件

  1. import React from 'react'
  2. import { CSSTransitionGroup } from 'react-transition-group'
  4. class Comcard extends React.Component {
  5.   constructor(){
  6.     super()
  7.     this.state = {
  8.       item: [{name:'yu'}]
  9.     }
  10.   }
  11.   handleClick = () => {
  12.     let newItems = this.state.item.slice()
  13.     newItems.push({
  14.       name: 'liu'
  15.     })
  16.     this.setState({
  17.       item: newItems
  18.     })
  19.   }
  20.   render(){
  21.     const items = this.state.item.map( (item,i) => (
  22.       <div key={i}>{item.name}</div>
  23.     ))
  24.     return(
  25.       <div className="comcard">
  26.         <CSSTransitionGroup
  27.           transitionName="example"
  28.           transitionEnterTimeout={500}
  29.           transitionLeaveTimeout={300}>
  30.           {items}
  31.         </CSSTransitionGroup>
  32.         <button onClick={this.handleClick}>点击</button>
  33.       </div>
  34.     )
  35.   }
  36. }
  38. export default Comcard

参考