ReactJS 中的滑动动画

Question

我目前正在从头开始构建一个轮播。 我设法建立了整个机制，但我未能添加动画。 我想做一个滑动效果。 我查看了所有可用的库，但我不明白它们是如何工作的。我是新手，我以前从未使用过动画，也从未使用过库。

这是我的轮播代码。

import JobCard from './JobCard';
import BlocSection from './BlocSection';
import axios from 'axios';
import '../assets/Carousel.scss';
import next from '../assets/img/next.png';
import back from '../assets/img/back.png';



export default class CarouselNew extends Component {

   constructor(props) {
   super(props);
   this.state ={
       jobs : [],
       position : 0
   };
}

  async componentDidMount() {

       try{
               const jobs = await axios.get("API LINK", {responseType : "json"})
               console.log('response : ', jobs)
               this.setState({jobs : jobs.data})

       }catch(e){
           console.log(e)
       }

 }


  changePositionNext(){
       {this.state.position < this.state.jobs.length-3 ? (this.setState({position : this.state.position +3})) 
       : (this.setState({position : 0})) }

}

   changePositionPrev(){
       {this.state.position == 0 ? (this.setState({position : this.state.jobs.length-3})) 
       : (this.setState({position :  this.state.position -3})) }
}





   render(){
       let selected = [];

      selected = this.state.jobs.length >0 ? this.state.jobs.slice(this.state.position, this.state.position +3) : []

       console.log('position : ', this.state.position);
       console.log('selected : ', selected);

       return(
           <div className='main_container' id='job'>
               <BlocSection section_title={"Nos offres d'emploi"} section_intro={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
               <div className='slider_container'>
                   <div onClick={() => this.changePositionPrev()} className="arrow_container"><img src={back} alt="" className="arrow"/></div>

                   {this.state.position === this.state.jobs.length-2 || this.state.position === this.state.jobs.length-1 && this.state.jobs.length %3 != 0 ? (this.setState({position : this.state.jobs.length-3})) : null}

                   {this.state.position === -2 || this.state.position === -1 && this.state.jobs.length %3 != 0 ? (this.setState({position : 0})) : null}

                   <div className="card_container">

                       {selected.map(job =>{
                           const title = job.title.rendered;
                           const description = job.acf.job_description;
                           const lien = job.acf.job_linkedin_url;
                           console.log('title : ', title);
                           return(
                               <JobCard key={title} title={title} description={description} lien={lien} />     
                               );
                           })}

                   </div>



                   <div onClick={() => this.changePositionNext()} className="arrow_container"><img src={next} alt="" className="arrow"/></div>

               </div>      

           </div>

       )



}
}

我正在考虑在点击时添加一个类并在 CSS 中制作动画，但我已经尝试过，但它不起作用。 我真正的问题是我不太习惯 JSX 语法，而且我总是遇到我不理解的错误。

有人有解决办法吗？

非常感谢您的帮助:)

Answer 1

要在 CSS 中为元素设置动画，您有多种可能性。

您可以使用转换：

transition: transform 0.2s ease-in-out;
transform: translateX(0);

.class-that-animates {
   transform: translateX(10px);
}

或者您可以通过关键帧添加动画：

animation: slide 0.5s forwards;
left: 0px;

@keyframes slide {
  100% { left: 10px; }
}

我更喜欢前者，您可以将 translateX 换成许多属性