Скользящая анимация в 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 для многих свойств