1

同じコンテナーに 2 つのブロック レベルの要素があるとします。最初 (ページの上部に近い) の高さを増やし、その高さでトランジションを使用したいと考えています。遷移が終了する前に、2 番目の div の結果の offsetTop を取得するにはどうすればよいですか?

この例でそれを行う方法を知りたくありません。一般的なケースでそれを行う方法を知りたいです。関心のある要素のすぐ上の要素だけでなく、他の多くの要素が同時に遷移する可能性があります。

私が考えられる唯一の方法は、トランジションを強制的に終了させ、位置を確認してから、すべてのトランジションを再開することです。...しかし、トランジションが始まると、私はそれをしなければならないことを意味します. ...そして、一時的に終了したトランジションでページを再描画すると、ちらつきが発生します。

デモ: http://jsbin.com/AyAfEXu/2

4

1 に答える 1

1

1 つの方法は、CSS トランジションをトリガーするクラスを追加したら、すべての要素を複製することです。その後、新しい値をすぐに保持する複製された要素から結果のプロパティを取得できます。

コンテナ要素の使用をお勧めします:

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

jQuery を使用すると、次のようになります。

$(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();
});

これは、このアプローチの実際のデモです

于 2013-10-29T06:13:13.867 に答える