P26:React高级-多DOM动画制作和编写react-transition-group

阐述

通过上一节的学习，只能控制一个DOM元素的动画，想控制多个动画 react-transition-group这个动画库也是可以做到的。

这节课就带你了解一下多DOM动画控制的方法。

使用 TransitionGroup

它就是负责多个DOM元素的动画的，我们还是拿服务这个案例作例子，现在可以添加任何的服务项目，但是都是直接出现的，没有任何动画，现在就给它添加上动画。

添加动画，先引入 transitionGrop。

直接打开 /src/Beauty.js 的文件，然后在最顶部同时

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

引入之后，就可以使用这个组件了，方法是在外层增加 标签。

{this.ul=ul}}>
    
    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }
    

这个需要放在循环的外边，这样才能形成一个组动画,但是只有这个是不够的，你还是需要加入,来定义动画。

加入 标签

可以完全仿照上节课的经验，为 Beauty 组件，加上具体的动画设置，就可以实现多DOM元素的动画效果了。

代码如下：

{this.ul=ul}}>
    
    {
        this.state.list.map((item,index)=>{
            return (
                
                    
                
            )
        })
    }
    
  

demo

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './Beauty'
ReactDOM.render(,document.getElementById('root'))

Beauty.js

import React,{Component,Fragment } from 'react'
import BeautyItem from './BeautyItem'
import axios from 'axios'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
import Boss from './Boss'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

componentDidMount(){
    axios.get('http://tt.cc/')
        .then((res)=>{
            // console.log(this.state.list)  res.data
            
            this.setState({
                list:[res.data.name,res.data.sex]
            })

        })
        .catch((error)=>{
            console.log('axios 获取数据失败'+error)
        })
}

shouldComponentUpdate(){
    console.log('shouldComponentUpdate---组件发生改变前执行')
    return true
}

componentWillUpdate(){
    console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                {this.input=input}}
                //关键代码------------end
                />
                 增加服务 
            
            {this.ul=ul}}>
            
            {
                this.state.list.map((item,index)=>{
                    return (
                        
                            
                        
                    )
                })
            }
            
          
        
        
    )
}

    // inputChange(e){
    //     // console.log(e.target.value);
    //     // this.state.inputValue=e.target.value;
    //     this.setState({
    //         inputValue:e.target.value
    //     })
    // }

    inputChange(){
        console.log(this.input.value);
        this.setState({
            inputValue:this.input.value
        })
    }
    
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty

BeautyItem.js

import React, { Component } from 'react'; //imrc
import PropTypes from 'prop-types'

class BeautyItem extends Component { //cc
   //--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }

   componentWillUnmount(){
        console.log('child - componentWillUnmount')
    }

    shouldComponentUpdate(nextProps,nextState){
        if(nextProps.content !== this.props.content){
            return true
        }else{
            return false
        }

    }

   //--------------主要代码--------end
   render() { 
        console.log("child -- render")
        return ( 
            
                {this.props.avname}为你服务-{this.props.content}
        );
    }
    handleClick(){
        console.log(this.props.index)
        this.props.deleteItem(this.props.index)
    }
}

BeautyItem.defaultProps = {
    avname:'苍井空'
}


//--------------主要代码--------start
BeautyItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number,
    avname:PropTypes.string.isRequired
}
//--------------主要代码--------end

export default BeautyItem;

Boss.js

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

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

    render() { 
        return ( 
            
                
                    BOSS级人物-孙悟空
                
                召唤Boss
            
            );
    }

    toToggole(){
        this.setState({
            isShow:this.state.isShow ? false : true
        })
    }
}
 
export default Boss;

exp.css

.input {border:3px solid #ae7000}

.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;
}

接口 php