为什么slideOutLeft CSS不能工作？
为什么slideOutLeft CSS不能工作？
提问于 2016-05-05 08:54:52
我正在尝试使用jQuery、addClass和removeClass来制作一个简单的选项卡，但是有一个slideOutLeft不起作用的问题:单击两次后，向左滑动无法工作。我在这里遗漏了什么，有人能在这方面帮助我吗？
我在codepen.io中创建了这个codepen.io：
<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");;
});
});回答 1
Stack Overflow用户
发布于 2016-05-05 09:57:52
问题是滑动动画绑定到leftRight类；当选项卡处于活动状态时，这个类将被删除，因此再次单击不会触发动画。单击active选项卡时，需要再次触发动画，方法是再次添加leftRight类或将动画移动到另一个类。
Chrome对于调试动画非常有用--通过打开devtools右上角的“动画”选项卡(双菱形图标)，您可以看到在每个类上触发的动画：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37046353
复制相关文章
相似问题
腾讯云开发者
