How to implement fade in and fade out in react

How to implement fade-in and fade-out in react: 1. Download the "react-addons-css-transition-group" library through "npm i react-addons-css-transition-group"; 2. Through "render() {return(

This Tutorial operating environment: Windows 10 system, react version 18.0.0, Dell G3 computer.

How to implement fade-in and fade-out in react?

React implement fade-in and fade-out

First you need to download a library, namely npm i react-addons-css-transition-group, then look at the code

//Pic.js

import React,{Component} from 'react'
import Img1 from '../../image/1.jpg'
import Img2 from '../../image/2.jpg'
import Img3 from '../../image/3.jpg'
import Image from './Image'
import Dot from './Dot'
import './pic.css'
class Pic extends Component{
    constructor(props){
        super(props)
        this.state={current:0,
            src:[Img1,Img2,Img3]
        }
        this.timer=null;
    }
    componentDidMount(){
        this.timer=setInterval(()=>{
            this.setState((prev)=>{return{current:(prev.current+1)%3}})
        },3000)
    }
    clear(){
        clearInterval(this.timer);
    }//鼠标移入结束动画
    start(){
        this.timer=setInterval(()=>{
            this.setState((prev)=>{return{current:(prev.current+1)%3}})
        },3000)
    }//鼠标移出开始动画
    change=(i)=>{
        console.log(i)
        this.setState({current:i})
    }//鼠标点击原点切换图片

    render(){
        return(<div className="list" 
        onMouseLeave={this.start.bind(this)}
        onMouseEnter={this.clear.bind(this)}>
            <Image src={this.state.src[this.state.current]} 
            current={this.state.current}
            name="item"
            component={&#39;li&#39;}
            enterDelay={1500}//动画开始所用时间
            leaveDelay={1500}//动画结束所用时间
            ></Image>
            <Dot current={this.state.current} change={this.change}></Dot>
        </div>)


    }

}
export default Pic

Image.js

import React,{Component} from 'react'
import CSSTransitionGroup from 'react-addons-css-transition-group';
import './pic.css'

class Image extends Component{

    constructor(props){
        super(props)
    }

    render(){
        return(
        <ul>
        <CSSTransitionGroup
               component={this.props.component}
               transitionName={this.props.name}
               transitionEnterTimeout={this.props.enterDelay}
               transitionLeaveTimeout={this.props.leaveDelay}
               className={this.props.name}
        >
            <img src={this.props.src}
            key={this.props.src}
            ></img>
        </CSSTransitionGroup>
        </ul>
        )
    }

}

export default Image

Dot.js

import React ,{Component} from 'react'

class Dot extends Component{
    constructor(props){
        super(props)
        this.state={arr:[1,2,3]}
    }
    render(){
        return(<div className="dot">
            <ul>
            {this.state.arr.map((item,index)=>{
                return(<li 
                    onClick={this.props.change.bind(this,index)}
                    key={index}
                    className={[index==this.props.current?&#39;current&#39;:&#39;&#39;]}></li>)
            })}
            </ul>
        </div>)
    }
}

export default Dot

//css样式
*{margin:0;padding:0;}
.list{width:500px;
     height:400px;
     margin:30px auto;
}
ul{position: relative;
   width:500px;
   height:400px;
   overflow: hidden;
}
li{
    position: absolute;
    list-style: none;}
img{width:500px;
    height:400px;
    }
.item-enter{
    position: absolute;
    opacity: 0;

}
.item-enter-active{opacity:1;
    transition: 1.5s opacity ease-in-out;
}
.item-leave{ position: absolute;
    opacity: 1;}
.item-leave-active{
    opacity: 0;
    transition: 1.5s opacity ease-in-out;
}

.dot{
    position: absolute;
    top:380px;
    left:250px;
  
    width:150px;
    height:50px;
}
.dot ul{width:100%;
        height:100%;
}
.dot li{
    position: static;
    float:left;
    margin-left:10px;
    width:25px;
    height:25px;
    border-radius: 50%;
    border:1px solid deeppink;
    transition:3s;
    list-style:none;}

.current{background-color: gold;}

Recommended learning:《react video tutorial》

The above is the detailed content of How to implement fade in and fade out in react. For more information, please follow other related articles on the PHP Chinese website!