react-transition-group动画库的基本使用

1、官网：https://reactcommunity.org/react-transition-group/transition

2、react下安装

1、cd到项目启动目录:

2、安装

npm install react-transition-group --save

3、它有三个核心库

• Transition
  • CSSTransition
    • TransitionGroup

1、如何使用CSSTransition

import { CSSTransition } from "react-transition-group";

2、剩余全部代码

import React, { Component } from 'react';
import './boos.css'

class Boss extends Component {
  constructor(props){
    super(props)
    this.state ={
      isShow : true
    }
    this.toToggole = this.toToggole.bind(this)
  }
  render() { 
    return ( 
      <div>
      	//包住需要动起来的那一部分就行了
        <CSSTransition
          in={this.state.isShow}
          timeout={2000}
          classNames="boss-text"
          // 退出时自动删除DOM，这是直接使用css无法做到的
          unmountOnExit 
        >
          <div>显示/隐藏</div>
        </CSSTransition>
        
        <div><button onClick={this.toToggole}>切换状态</button></div>
      </div>
     );
  }

  toToggole(){
    this.setState({
      isShow:this.state.isShow ? false : true
    })
  }


}
 
export default Boss;

3、css下加入以下内容：

/* 入场前的动画 */
.boss-text-enter{
  opacity: 0;
}
/* 进入动画直到完成前的动画 */
.boss-text-enter-active{
  opacity: 1;
  transition: opacity 2000ms;
}
/* 进入完成时的动画 */
.boss-text-enter-done{
  opacity: 1;
}

/* 退出前的动画 */
.boss-text-exit{
  opacity: 1;
}

/* 退出动画完成前的动画 */
.boss-text-exit-active{
  opacity: 0;
  transition: opacity 2000ms;
}

/* 退出动画完成时的动画 */
.boss-text-exit-done{
  opacity: 0;
}

到这里就可以看见动画效果了，全部由react-transition-group操作

4、TransitionGroup和CSSTransition库的使用

1、引入

import { CSSTransition,TransitionGroup } from "react-transition-group";

2、使用:TransitionGroup里面要有CSSTransition，否则没什么卵用

 <ul ref={(ul) => this.ul = ul}>
            <TransitionGroup>
            {
              this.state.todos.map((item,index) =>{
                return (
                  <CSSTransition
                      timeout={1000}
                      className='boss-text'
                      unmountOnExit
                      appear={true}
                      key={index + item}
                      >
                      <TodoItems
                      content={item} 
                      index={index}
                      delTodo={this.delTodo.bind(this)}
                      />
                    </CSSTransition>

                )
              })
            }
            </TransitionGroup>
</ul>