Javascript 交换<；部门>；位置导致CSS3过渡效应的损失

我遇到了一个问题，这似乎是由于改变了两个

在其父对象中的位置，本质上是对它们重新排序而引起的

两个div都应用了

转换
css规则，如下所示：

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

当我调用此来交换位置时：

function swapElements(first, second) {
    $(first).insertBefore(second);
}

第一个
元素没有浏览器应用的过渡效果，在与上一个/第二个元素交换后，它基本上根本没有动画效果

这是一个问题，因为我正在侦听转换结束回调，然后在
中执行更多工作（初始化库）：

由于浏览器未对此元素执行转换，因此事件
.one（'transitionend WebKittTransitionEnd otTransitionEnd MSTransitionEnd'，function（）{}）
永远不会触发code>，因此库不会为其初始化

有人知道是什么导致了这种行为吗

编辑：。您需要展开“输出”窗口，以便有四列

如您所见，单击前三个选项中的任何一个都会产生动画效果，单击行中标记为
last ROOM
的最后一个
，不会产生任何动画

有趣的是，如果我将
交换代码包装在
setTimeout
调用中，它工作得很好，这似乎是一个时间问题，显然我不想依赖它作为一个黑客补丁，但它也会导致div跳转到位，这是不可取的。
问题发生的原因是在交换之后，您还将删除原始类（对于小方框显示）并替换为新类（对于较大的显示）。这三种情况都发生在一个阻塞调用中。每当添加元素时，浏览器都需要触发回流，但在每个步骤后不会触发回流，因为这样做会影响性能。因此，回流发生在最后（也在执行removeClass和addClass之后），因此只有一个元素有新的类正在屏幕上绘制-没有状态更改，因此也没有转换

为了克服这一点，我们需要强制UA在交换后但在类更改之前触发回流/重新绘制。这可以通过两种方式来实现，一种是强制类更改语句进入不同的函数调用（匿名函数使用
setTimeout
），另一种是强制UA计算
clientHeight
等（它们强制重新绘制，因为它们只能计算实际高度）

|
@哈利，我试试看，sure@Harry添加了一个js提琴。展开“输出”窗口，以便获得四列，单击前三列中的任意一列，您将获得动画，单击触发交换的最后一个div不会导致动画出现。我想我知道原因。“这就是你需要的吗？”哈利，是的，效果很好，你能解释一下为什么吗？超时甚至没有持续时间！我使用了类似的方法，但是使用了与CSS转换相同的延迟，例如2seconds@Harry否动画重新运行问题是由库箭头单击事件冒泡到父pod引起的，单击父pod是导致动画运行的原因，因此它冒泡并重新运行。
window.setTimeout
是此处的关键修复程序，您能否将其添加为答案并解释其工作原理？谢谢谢谢，完美的解释。
if (Modernizr.csstransitions) {
        $(roomColumn).one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
           if (!gallery.hasClass('slick-initialized')) {
                $(gallery).slick({
                    lazyLoad: 'progressive',
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    autoplay: false,
                    dots: false,
                    adaptiveHeight: false
                });
            }
        });
    }