Javascript 为什么滑出式CSS不起作用？

我试图用jQuery

addClass

和

removeClass

创建一个简单的选项卡，但我遇到了一个问题，即

slideoutletft

不起作用：单击两次后，slideOutLeft不起作用。我在这里缺少什么，在这方面有人能帮助我吗

我在codepen.io中创建了这个：

HTML

<div class="container">
   <div class="tabContainer">
      <div class="tabItem" id="1">1</div>
      <div class="tabItem" id="2">2</div>
      <div class="tabItem" id="3">3</div>
      <div class="tabItem" id="4">4</div>
      <div class="tabItem" id="5">5</div>
      <div class="tabItem" id="6">6</div>
      <div class="tabItem" id="7">7</div>
   </div>
   <div class="tabBody">
      <div class="tabMain active" id="tab1">1</div>
      <div class="tabMain leftRight" id="tab2">2</div>
      <div class="tabMain leftRight" id="tab3">3</div>
      <div class="tabMain leftRight" id="tab4">4</div>
      <div class="tabMain leftRight" id="tab5">5</div>
      <div class="tabMain leftRight" id="tab6">6</div>
      <div class="tabMain leftRight" id="tab7">7</div>
   </div>
</div>

JS

.container {
   position:relative;
   width:100%;
   max-width:550px;
   margin:0px auto;
   background-color:#d8dbdf;
   overflow:hidden;
   border-radius:2px;
   -webkit-border-radius:2px;
}
.tabContainer {
   padding:10px;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   position:relative;
   width:100%;
   background-color:#009688;
    border-radius:2px;
   -webkit-border-radius:2px;
   overflow:hidden;
}
.tabBody {
   position:relative;
   overflow-x:hidden;
   height:300px;
   overflow-y:hidden;
}
.tabItem {
   float:left;
   position:relative;
   padding: 5px 8px;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   color:#ffffff;
   width:14%;
}
.tabMain {
   width:100%;
   min-height:300px;
   background-color:#f8f8f8;
   transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
    -webkit-transform: scale(0); 
   opacity:0;
  display:none;
}
.active {
  opacity:1;
   display:block;
    -webkit-transform: scale(1); 
-moz-animation: slideInRight 0.5s ease-in-out 0.5s;
  -webkit-animation: slideInRight 0.5s ease-in-out 0.5s;
  animation: slideInRight 0.5s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}
.leftRight{
   opacity:0;
   display:none;
  -moz-animation: slideOutLeft 0.5s ease-in-out 0.5s;
  -webkit-animation: slideOutLeft 0.5s ease-in-out 0.5s;
  animation: slideOutLeft 0.5s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; 
}
@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight
}

$(document).ready(function() {
   $("body").on("click", ".tabItem", function() {
      var ID = $(this).attr("id");
      $(".tabMain").removeClass("active").addClass("leftRight");

      $("#tab" + ID).addClass("active").removeClass("leftRight");;
   });

});

---

问题是滑动动画与

leftRight

类绑定；该选项卡处于活动状态时，此类将被删除，因此再次单击不会触发动画。您需要在单击活动选项卡时再次触发动画，或者再次添加

leftRight

类，或者将动画移动到另一个类

Chrome对调试动画非常有用-打开devtools右上角的“动画”选项卡（双菱形图标），可以看到每个类上触发的动画：

---

我认为问题在于不透明度和显示。你需要检查一下。你能更具体一点吗？@Pugazh我怎么能更具体一点？我想这是一个具体的问题。@DevStud你在我回答下的评论中说：“我希望它在点击两次后滑出。”谢谢你现在按要求添加此信息。