react学习之旅十二：React动画库react-transition-group

一、安装

在终端输入

npm install react-transition-group --save

二、使用

react-transition-group插件包含三个库：Transition、CSSTransition以及TransitionGroup。

使用时需要引入动画库（引入需要使用的库即可）：

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

CSSTransition使用案例：

新建Boss.js，内容如下

classNames="boss-text"表示引用以''boss-text''开头的CSS

unmountOnExit表示退出时删除组件

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';

class Boss extends Component {
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
        this.toToggle = this.toToggle.bind(this)
    }

    render() { 
        return ( 
            <div>
                <CSSTransition
                    in={this.state.isShow}
                    timeout={2000}
                    classNames="boss-text"
                    unmountOnExit
                >
                    <div>Boss级人物-孙悟空</div>
                </CSSTransition>
                <div>
                    <button onClick={this.toToggle}>
                        召唤Boss
                    </button>
                </div>
            </div>
         );
    }

    toToggle(){
        this.setState({
            isShow:!this.state.isShow
        })
    }
}
 
export default Boss;

style.css

.input{
    border:3px solid #ae7000
}
/*
    xxx-enter        //进入页面前
    xxx-enter-active //进入页面时
    xxx-enter-done   //进入页面后
    xxx-exit         //退出页面前
    xxx-exit-active  //退出页面时
    xxx-exit-done    //退出页面完成后
*/
.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;
}

实现效果

多DOM动画案例：

引入CSSTransition和TransitionGroup。

Xiaojiejie.js

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import './style.css';
import XiaojiejieItem from './XiaojiejieItem';
import Boss from './Boss';
import {CSSTransition,TransitionGroup} from 'react-transition-group';

class Xiaojiejie extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',  //输入值
            list: []  //服务列表
        }
    }

    componentDidMount(){
        axios.get('/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')
            .then((res)=>{
                console.log('axios获取数据成功'+JSON.stringify(res))
                this.setState({
                    list:res.data.data
                })
            })
            .catch((error)=>{
                console.log('axios获取数据失败'+error)  
            })
    }

    render() {
        // console.log("render---组件挂载中");
        return (
            <Fragment>    {/*Fragment不显示 */}
                <div>
                    <label htmlFor="serve">增加服务：</label>
                    <input
                        id="serve"
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.inputChange.bind(this)}
                        ref={(input)=>{this.input=input}}
                    />
                    <button onClick={this.addList.bind(this)}>增加服务</button>
                </div>
                <ul ref={(ul)=>{this.ul=ul}}>
                    <TransitionGroup>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <CSSTransition
                                    timeout={2000}
                                    classNames="boss-text"
                                    unmountOnExit
                                    appear={true}
                                    key={index+item}
                                >
                                    <XiaojiejieItem
                                    key={index+item}
                                    content={item}
                                    index={index}
                                    deleteItem={this.deleteItem.bind(this)}
                                    />
                                </CSSTransition>
                                
                            )
                        })
                    }
                    </TransitionGroup>
                </ul>

                <Boss/>
            </Fragment>
        )
    }

    inputChange() {
        this.setState({
            inputValue: this.input.value
        })
    }

    addList() {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            //...表示扩展运算符
            //相当于['基础按摩','精油推背',this.state.inputValue]
            inputValue: ''
        },()=>{
            console.log(this.ul.querySelectorAll('li').length);
        })
    }

    deleteItem(index) {
        //不可以直接操作this.state.list，需要引入一个局部变量
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({
            list: list
        })
    }
}

export default Xiaojiejie; //暴露Xiaojiejie组件，让外部能够进行引用

实现效果