Question

我希望能够从页面的任意一侧滑入div（这最终会变成类似轮播的应用程序）。当用户点击＆＃34;转发＆＃34;或者＆＃34;落后＆＃34;按钮，我滑出任何活动的div，创建一个新的div，添加类＆＃34;左＆＃34;或＆＃34;对＆＃34;它开始，然后添加过渡类＆＃34;活跃＆＃34;所以它会移动到位，就像这样：

$("#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永远不会让＆＃34;离开＆＃34;或＆＃34;对＆＃34; css生效;它只是立即出现在中心。在活动的css之前，使左右css适用的正确方法是什么？

Answer 1

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

你可以激励你解决问题。通过单击div或按钮完成转换触发器，然后应用该类。有关更多详细信息，请查看小提琴中的过渡类。

$('.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();
});

CSS3 / JQuery等待css应用

1 个答案: