爲什麼slideOutLeft CSS不起作用？

Question

我試圖做一個簡單的選項卡與jQuery addClass和removeClass但我有一個問題slideOutLeft無法正常工作：滑出左後單擊兩次後不起作用。我在這裏想念什麼，任何人都可以在這方面幫助我？

我創造了這個DEMO在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> 

CSS

.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 
} 

JS

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

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

}); 

Answer 1

問題在於滑動動畫與leftRight類有關;該選項卡處於活動狀態時將刪除此類，因此再次單擊不會觸發動畫。您需要在點擊活動選項卡時再次觸發動畫，方法是再次添加leftRight類或將動畫移至其他類。

Chrome是用於調試的動畫非常有用 - 你可以看到在devtools的右上角（雙菱形圖標），打開「動畫」選項卡上的每個類觸發動畫：