반응에서 페이드인 및 페이드아웃을 구현하는 방법: 1. "npm i React-addons-css-transition-group"을 통해 "react-addons-css-transition-group" 라이브러리를 다운로드합니다. 2. "를 통해" render(){return(< ;div className="list" onMouseLeave={this.start.bind...}"는 페이드 인 및 페이드 아웃에 사용될 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, React 버전 18.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 비디오 튜토리얼"
위 내용은 반응으로 페이드 인 및 페이드 아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!