react实现淡入淡出的方法:1、通过“npm i react-addons-css-transition-group”下载“react-addons-css-transition-group”库;2、通过“render(){return(<div className="list" onMouseLeave={this.start.bind...}”方式实现淡入淡出即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react 怎么实现淡入淡出?
react实现淡入淡出
首先要下载一个库,即npm i react-addons-css-transition-group,接下来看代码
//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 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?'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 怎么实现淡入淡出的详细内容,更多请关注php中文网其它相关文章!
已抢111615个
抢已抢47441个
抢已抢134017个
抢已抢32532个
抢已抢584个
抢已抢1107个
抢