未執行CSS轉換

我正在嘗試在傳送帶式容器中爲兩個div元素設置動畫。這裏是標記，因爲它出現在DOM：未執行CSS轉換

<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()有沒有辦法繞過這個的？

來源

2012-07-19 BenM

你需要觸發一個瀏覽器迴流

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

你可以做到這一點與$("body")[0].offsetWidth;例如。

這實際上是一個合法的技術，twitter bootstrap uses例如

來源

2012-07-19 21:24:35 Esailija

爲什麼說「例如」太多 – Esailija 2012-07-19 21:26:54

聽起來比「perkele」更好。 – 2012-07-19 21:27:38

赫赫感謝您的幫助，之前從未遇到過這個bug，並且不知道導致瀏覽器迴流。任何想法爲什麼我們需要這樣做？ – BenM 2012-07-19 21:27:53

未執行CSS轉換

回答

相關問題