javascript - アニメーションを追加すると、奇妙な結果が得られます

Question

プロジェクトにドラグラを統合しましたが、タイルをグリッドに見せる必要があるため、行番号 441 ( dropTarget.insertBefore(item, reference);) を次のように変更しました。

var immediateSibling = immediate.nextSibling;
parent.insertBefore(immediate, item);
parent.insertBefore(item, immediateSibling);

詳細については、 issue #391を参照してください。

とにかく、タイルをドラッグしたときにアニメーションを追加したいです。そこで、 441 行目を次のように変更しました。

var immediateSibling = immediate.nextSibling,
itemRect = item.getBoundingClientRect(),
immediateRect = immediate.getBoundingClientRect();

parent.insertBefore(immediate, item);
parent.insertBefore(item, immediateSibling);

animate(immediate, immediateRect, itemRect);
animate(item, itemRect, immediateRect);

function animate(target, currentRect, prevRect) {
    var ms = 5000;

    target.style.transition = 'none';
    target.style.transform = 'translate3d(' + (currentRect.left - prevRect.left) + 'px,' +
        (currentRect.top - prevRect.top) + 'px, 0)';

    target.offsetWidth; // repaint

    target.style.transition = 'transform ' + ms + 'ms';
    target.style.transform = 'translate3d(0, 0, 0)';
}

アニメーションを追加して垂直方向にドラッグすると、奇妙なアニメーションでエラーが発生します。これを説明する gif を次に示します。

DOM is ChangingDOM の変更ごとに複数のログがないことを確認するにはどうすればよいですか?

JSFiddle

行番号 392から始まる関連コードは次のとおりです。

function drag(e) {
    if (!_mirror) {
        return;
    }
    e.preventDefault();

    var clientX = getCoord('clientX', e);
    var clientY = getCoord('clientY', e);
    var x = clientX - _offsetX;
    var y = clientY - _offsetY;

    _mirror.style.transform = 'translate3d(' + x + 'px,' + (y - (_mirror.offsetHeight * 2)) + 'px, 0)';

    var item = _copy || _item;
    var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
    var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
    var changed = dropTarget !== null && dropTarget !== _lastDropTarget;

    //if (item.style.transition === 'transform 5000ms') return;

    if (changed || dropTarget === null) {
        out();
        _lastDropTarget = dropTarget;
        over();
    }
    var parent = getParent(item);
    if (dropTarget === _source && _copy && !o.copySortSource) {
        if (parent) {
            parent.removeChild(item);
        }
        return;
    }
    var reference;
    var immediate = getImmediateChild(dropTarget, elementBehindCursor);

    if (o.revertOnSpillParent === true && immediate === parent) {
        immediate = null;
    }

    if (immediate !== null) {
        reference = getReference(dropTarget, immediate, clientX, clientY);
    }
    else if (o.revertOnSpill === true && !_copy) {
        reference = _initialSibling;
        dropTarget = _source;
    }
    else {
        if (_copy && parent) {
            parent.removeChild(item);
        }
        return;
    }
    if (
        (reference === null && changed) ||
        reference !== item &&
        reference !== nextEl(item)
    ) {
        console.log('hello');

        _currentSibling = reference;
        // save the location of next sibling of immediate
        var immediateSibling = immediate.nextSibling,
            // Save location of swapped elements
            itemRect = item.getBoundingClientRect(),
            immediateRect = immediate.getBoundingClientRect();

        parent.insertBefore(immediate, item);
        parent.insertBefore(item, immediateSibling);

        animate(immediate, immediateRect, itemRect);
        animate(item, itemRect, immediateRect);

        drake.emit('shadow', item, dropTarget, _source);
    }

    function moved(type) {
        drake.emit(type, item, _lastDropTarget, _source);
    }

    function over() {
        if (changed) {
            moved('over');
        }
    }

    function out() {
        if (_lastDropTarget) {
            moved('out');
        }
    }

    function animate(target, currentRect, prevRect) {
        var ms = 5000;

        target.style.transition = 'none';
        target.style.transform = 'translate3d(' + (currentRect.left - prevRect.left) + 'px,' +
            (currentRect.top - prevRect.top) + 'px, 0)';

        target.offsetWidth; // repaint

        target.style.transition = 'transform ' + ms + 'ms';
        target.style.transform = 'translate3d(0, 0, 0)';
    }
}