CSS3/JQuery 等待 css 被应用

Question

我希望能够从页面的任一侧滑入一个 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 的正确方法是什么？

Answer 1

这不是即插即用的解决方案，但这里有一个在 div 上应用 CSS 过渡的示例：http://jsfiddle.net/VPjX9/193/

您可以启发您解决问题。通过单击div 或按钮完成转换触发，然后应用该类。 查看 fiddle 中的转换类以获取更多详细信息。

$('.page1, .page2, #go').click(function() {
    var page1 = $('.page1');
    var page2 = $('.page2');
    var toHide = page1.is(':visible') ? page1 : page2;
    var toShow = page2.is(':visible') ? page1 : page2;

    toHide.removeClass('flip in').addClass('flip out').hide();
    toShow.removeClass('flip out').addClass('flip in').show();
});

​