Javascript ReactJS中的滑动动画

我目前正在从头开始建造一个旋转木马。 我设法建立了整个机制，但我在添加动画失败。 我想做一个滑动效果。 我查阅了所有可用的库，但我不明白它们是如何工作的。我是一个新的反应，我从来没有使用过动画之前，也没有图书馆

这是我的旋转木马的代码

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>

       )



}
}

从“/JobCard”导入工作卡；
从“/BlocSection”导入BlocSection；
从“axios”导入axios；
导入“../assets/Carousel.scss”；
从“../assets/img/next.png”导入下一步；
从“../assets/img/back.png”导入回；
导出默认类CarouselNew extends组件{
建造师（道具）{
超级（道具）；
这个州={
职位：[]，
职位：0
};
}
异步组件didmount（）{
试一试{
const jobs=await axios.get（“API链接”{responseType:“json”}）
console.log（'响应：'，作业）
this.setState（{jobs:jobs.data}）
}捕获（e）{
控制台日志（e）
}
}
changePositionNext（）{
{this.state.position0？this.state.jobs.slice（this.state.position，this.state.position+3）：[]
log（'position:'，this.state.position）；
console.log（'selected:'，selected）；
返回(
this.changePositionPrev（）}className=“arrow\u container”>
{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}
{选定的.map（作业=>{
const title=job.title.rendered；
const description=job.acf.job\u description；
const lien=job.acf.job\u linkedin\u url；
console.log（'title:'，title）；
返回(
);
})}
this.changePositionNext（）}className=“arrow\u container”>
)
}
}

我曾考虑在点击时添加一个类，然后在CSS中制作动画，但我已经尝试过了，但它不起作用。 我真正的问题是我不太习惯JSX语法，我总是以不理解的错误告终

有人有解决办法吗

---

非常感谢您的帮助：）

要在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替换为许多属性

如果切换类对你有效，那么应该可以（而且更好）完全在css中处理它。如果你更新到切换类不起作用的程度，我可以帮你添加css动画我希望css动画能得到一些帮助是的。。我从来没有用Css做过这样的事谢谢你。我找到了制作另一部动画的方法。我们选择了淡出/淡入。但我还有另一个问题：我的班级“切换”不是我想要的方式。我需要类在动画完成后“删除”自己。有没有办法做到这一点？具体来说？可能是另一个问题。看见