1

假设我在同一个容器中有两个块级元素。我想增加第一个（靠近页面顶部）的高度，并在该高度上使用过渡。在过渡结束之前，如何获得第二个 div 的结果 offsetTop ？

对于这个例子，我不想知道如何做。我想知道如何为一般案例做这件事。许多其他元素可能同时经历过渡，而不仅仅是我感兴趣的元素正上方的元素。

我能想到的唯一方法是强制过渡结束，检查位置，然后重新启动所有过渡。...但意味着我必须在过渡开始时这样做。...当使用临时完成的转换重新绘制页面时，它会导致闪烁。

演示：http: //jsbin.com/AyAfEXu/2

4

1 回答 1

1

One approach would be to clone all your elements once you have added the classes that trigger the CSS transitions, then you can get the resulting properties from the cloned elements which will immediately hold the new values.

I suggest the use of a container element:

<div id="container">
    <div id="one"></div>
    <div id="two">
        <div id="curr">current offsetTop of P:</div>
    </div>
</div>

And with jQuery you would do:

$(function () {
    //Kick off animations
    $('#one').addClass('loaded');

    //Clone container and position it outside of view
    var $cloneContainer = $('#container').clone().css({
        position: 'absolute',
        left: '-99999px'
    }).prependTo('body');

    //Get offset from cloned element
    var newOffset = $cloneContainer.find('#two').offset().top;
    console.log(newOffset);

    //Remove clone
    $cloneContainer.remove();
});

Here's a working demo of this approach

于 2013-10-29T06:13:13.867 回答