0

div現在、カルーセルタイプのコンテナで2つの要素をアニメーション化しようとしています。DOMに表示されるマークアップは次のとおりです。

<div id="transitioner" style="width: 2880px; height: 775px; left: -1440px; ">
    <div id="view1" class="view active" style="width: 1440px; height: 775px; ">
        <header>
            <h1>This is page 1</h1>
        </header>
        <article style="height: 699px; ">
            <p>Tap me anywhere to go to the next view</p>
        </article>
        <footer>
            <p>This is my footer</p>
        </footer>    
    </div>
    <div id="view2" class="view" style="width: 1440px; height: 775px; ">
        <header style="">
            <h1>This is page 2</h1>
        </header>
    </div>
</div>

そして、これが#transitioner要素のCSSです。

#transitioner {
    position: absolute;
    top: 0;
    -webkit-transition: all 0.2s ease-in-out;
}

最後に、JS：

function GotoView(view)
{
    var roller = $('<div id="transitioner" />');
    roller.width((viewport.width * 2)).height(viewport.height);
    var current = $('.view.active').clone(true, true);
    $('.view.active').remove();
    current.prependTo(roller);

    var new_view = view.clone(true, true);
    view.remove();
    new_view.appendTo(roller);

    roller.appendTo($('body'));
    $('body').addClass('transitioning');
    //window.setTimeout(function() { roller.css({ left: 0 - viewport.width }) }, 2000);
    roller.css({ left: 0 - viewport.width });
}

div包含（つまり）の左側の位置を更新しますが、を#transitioner入力しない限りsetTimeout、CSS遷移は実行されず、包含はdiv単に「ジャンプ」して目的の新しいleftオフセットになります。

jsFiddleをまとめたので、症状を確認できます> http://jsfiddle.net/XPUPQ/

私の質問は、これは何が起こっているのかということです。JSを使用するsetTimeout()以外に、これを回避する方法はありますか？

4

1 に答える 1

5

ブラウザのリフローをトリガーする必要があります

http://jsfiddle.net/XPUPQ/1/

$("body")[0].offsetWidth;たとえば、それを行うことができます。

これは実際には、たとえばTwitter のブートストラップが使用する正当な手法です。

于 2012-07-19T21:24:35.180 に答える