未执行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转换

回答

相关问题