Warum funktioniert das slideOutLeft CSS nicht?

Question

Ich versuche, eine einfache Registerkarte mit der jQuery addClass und removeClass machen, aber ich habe ein Problem, das slideOutLeft nicht funktioniert: Slide out links funktioniert nicht nach zweimal klicken. Was fehlt mir hier und kann mir hier jemand weiterhelfen?

habe ich schuf dieses DEMO in 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

Das Problem ist, dass die gleitende Animation an die leftRight Klasse gebunden ist; Diese Klasse wird entfernt, wenn die Registerkarte aktiv ist. Durch erneutes Klicken wird die Animation nicht ausgelöst. Sie müssen die Animation erneut auslösen, wenn Sie auf eine aktive Registerkarte klicken, indem Sie die Klasse leftRight erneut hinzufügen oder die Animation in eine andere Klasse verschieben.

Chrome ist wirklich nützlich, Animationen für das Debugging - Sie die Animationen auf jeder Klasse ausgelöst sehen die ‚Animationen‘ Reiter in der oberen rechten Ecke der devtools durch Öffnen (das Doppel-Diamant-Symbol):