我希望能够从页面的任一侧滑入一个 div(这最终会变成一个类似轮播的应用程序)。当用户单击“前进”或“后退”按钮时,我滑出任何活动的 div,创建一个新的 div,添加类“左”或“右”开始,然后添加过渡类“活动”所以它将移动到位,如下所示:
$("#forward").click(function(){
$(".active").removeClass("active left right").addClass("toRight").bind(transitionendstr, function(){
$(this).remove();
});
data = "new data here";
target = $(slidepartial).clone().addClass("left");
$("#content").append(target);
$(target).addClass("active");
});
CSS在哪里:
.active{
left:50% !important;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
.left{
left:-100%;
}
.right{
left:100%;
}
.toRight{
left:100%;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
.toLeft{
left:-100%;
transition:left 2s;
-moz-transition: left 2s; /* Firefox 4 */
-webkit-transition: left 2s; /* Safari and Chrome */
-o-transition: left 2s; /* Opera */
}
唯一的问题是,我创建的新 div 永远不会让“左”或“右”css 生效;它立即出现在中心。在活动css之前使左右css应用的正确方法是什么?