您当前的位置: 首页 >  动画

知其黑、受其白

暂无认证

  • 0浏览

    0关注

    1250博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

知其黑、受其白 发布时间:2021-12-13 16:42:42 ,浏览量:0

React16 基础
  • 阐述
  • 使用 TransitionGroup
  • 加入 `` 标签
  • demo
    • index.js
    • Beauty.js
    • BeautyItem.js
    • Boss.js
    • exp.css
    • 接口 php

阐述

通过上一节的学习,只能控制一个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
            
关注
打赏
1665558895
查看更多评论
0.0621s