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 ( 
            

                
                    
Boss级人物-孙悟空
                
                

                    
                        召唤Boss
                    
                
            
         );
    }

    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不显示 */}
                

                    增加服务：
                    {this.input=input}}
                    />
                    增加服务
                
                
{this.ul=ul}}>
                    
                    {
                        this.state.list.map((item, index) => {
                            return (
                                
                                    
                                
                                
                            )
                        })
                    }
                    
                

                
            
        )
    }

    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组件，让外部能够进行引用

实现效果