Cara melaksanakan fade-in dan fade-out dalam react: 1. Muat turun perpustakaan "react-addons-css-transition-group" melalui "npm i react-addons-css-transition-group"; 2. Melalui "render() {return(
Persekitaran pengendalian Tutorial ini: Sistem Windows 10, react versi 18.0.0, komputer Dell G3
Cara melaksanakan fade in dan fade out in react. ?
Mula-mula anda perlu memuat turun perpustakaan, iaitu npm i react-addons-css-transition-group, kemudian lihat kod
Pembelajaran yang disyorkan: "tutorial video bertindak balas//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={'li'} enterDelay={1500}//动画开始所用时间 leaveDelay={1500}//动画结束所用时间 ></Image> <Dot current={this.state.current} change={this.change}></Dot> </div>) } } export default PicSalin selepas log masuk"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 ImageSalin selepas log masukDot.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?'current':'']}></li>) })} </ul> </div>) } } export default DotSalin selepas log masuk//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;}Salin selepas log masukAtas ialah kandungan terperinci Bagaimana untuk melaksanakan fade in dan fade out sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!