0

ページの両側から 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を適用する適切な方法は何ですか?

4

1 に答える 1

0

これはプラグ アンド プレイ ソリューションではありませんが、CSS トランジションを適用するサンプルを次に示しますdiv: 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();
});

</p>

于 2012-12-24T16:22:25.617 に答える