When I add animation, I get weird results

Question

I integrated dragula in my project, and I need the tiles to have a grid look, so I changed line #441 (dropTarget.insertBefore(item, reference);) to:

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

See issue #391 for more info on that.

Anyway, I want to add animation when you drag the tiles. So I modifyed line #441 to this:

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)';
}

When I add the animation, then drag vertically, I get errors with a weird animation. Here's a gif explaining:

How can I make sure there isn't multiple logs of DOM is Changing for every change of the DOM?

JSFiddle

Here's the relevant code starting from line #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)';
    }
}