javascript - 过渡未正确执行

Question

我正在尝试为图片库执行转换。当图库转换到下一张幻灯片时，我会将它放在当前幻灯片的左侧，并通过转换到其 left 样式将其滑过当前幻灯片。

我当前的标记:

 <section id="nd-gallery">
    <div class="nd-slide nd-slide-current">
        slide 1
    </div>
    <div class="nd-slide nd-slide-next">
        slide 2
    </div>
</section>

相关 CSS:

#nd-gallery{
    position:relative;
    height:100px;
    width:100px;
}

#nd-gallery > .nd-slide{
    position:absolute;
    height:100px;
    height:100px;
    outline:1px solid red;
    left:-40px;
}

#nd-gallery > .nd-slide.nd-slide-current{
    z-index:5;
    left:0;
}

因此，默认情况下，我通过将幻灯片向左移动 40 像素来偏移它们(显然，我会使用更大的偏移量将它们更好地隐藏在该演示之外)

现在，通过一些脚本，我想:

• 将新的 left 值应用到下一张幻灯片以将其偏移(出于本演示的目的，50px 使下一张幻灯片在当前幻灯片上偏移一半)

• 分配适当的过渡属性

• 分配一个新的 left 值，以便下一张幻灯片将滑过当前幻灯片

脚本:

var next = document.querySelector('.nd-slide-next');
next.style.left = '-50px';
next.style.transitionProperty = 'left';
next.style.transitionDuration = '5s';
next.style.left = '0';

但是，当我运行它时，下一张幻灯片出现在当前幻灯片的顶部，没有过渡:

http://jsfiddle.net/ACdc7/4/

注意:显然 Firefox 正确执行了转换。在 Windows 7 上的 Chrome v.32 中，不会执行转换。谁能指出我是否做错了什么，或者我正在处理 Chrome 中的错误？

Answer 1

就像许多仅在一个线程中执行所有 UI 操作的 UI 框架(Windows 窗体、WPF ...)一样，大多数布局操作在用户代码执行时被阻止。为什么？好吧，当 Javascript 代码正在执行时，浏览器通常没有响应，因为它的 UI 线程正在处理您的代码。因此，如果在将控制权交给浏览器之前多次更改同一属性的值，则只会保留最后一个值。当您更改元素的 left 值时，通过布局过程会浪费处理能力，而您稍后可以在同一事件处理程序中更改它。因此，浏览器只是创建一个等待布局操作的队列，并在它无事可做时执行它们。

适用于您的情况，浏览器将操作 {next.style, 'left', -50px} 添加到队列中。当您再次向左更新时，浏览器不会添加新操作。因为有一个 pending 做同样的事情，它只是更新它。因此，对于浏览器而言，您并没有将 left 属性从 -50px 更改为 0px，您只是将其设置为 0px。

将 left 设置为 -50px 后，您需要将控制权交给浏览器。然后，将其设置回 0px。你可以这样做:

var next = document.querySelector('.nd-slide-next');
next.style.left = '-50px';
setTimeout(function() {
    next.style.transitionProperty = 'left';
    next.style.transitionDuration = '5s';
    next.style.left = '0';
}, 10);

如果您强制使用同步布局(这通常是不可取的)，它也可以工作。您可以通过访问 DOM 节点的某些属性来实现此目的，例如 offset- 或 client- 属性。这些属性总是返回最新的值，因此，如果有待处理的布局操作，浏览器会停止执行 javascript 代码，执行布局，然后继续执行:

var next = document.querySelector('.nd-slide-next');
next.style.left = '-50px';
var offset = next.offsetLeft; //force layout. The broswer know acknowledges that next.style.left is -50px.
next.style.transitionProperty = 'left';
next.style.transitionDuration = '5s';
next.style.left = '0';