本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react 怎么实现淡入淡出？
react实现淡入淡出
首先要下载一个库，即npm i react-addons-css-transition-group,接下来看代码
//pic.jsimport 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 pic
image.jsimport 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.jsimport 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 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;}
推荐学习：《react视频教程》
以上就是react 怎么实现淡入淡出的详细内容。