交换 <div> 位置导致CSS3过渡效果丢失

Question

我有一个问题似乎是由于改变了父级中两个<divs>的位置，实质上是重新排序它们。

这两个div都有一个transition 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);
}

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

这是一个问题，因为我正在收听转换结束回调，然后在<div> （初始化图库）中做更多的工作：

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

因为浏览器没有为这个元素做过渡，所以事件.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (){}); 永远不会为此<div>触发，因此库未初始化。

有没有人对可能导致这种行为的原因有任何想法？

编辑： 这是一个非常粗鲁的JS小提琴 。 您需要展开输出窗口，使其为四列。

如您所见，单击前三个中的任何一个为您提供动画效果，单击行中标记为LAST ROOM的最后一个<div>不会导致任何动画发生。

有趣的是，如果我在一个setTimeout调用中包装<div>交换代码它工作正常，这似乎是一个计时问题，显然我不想依赖它作为一个hacky修复，但它也导致div跳进这是不受欢迎的地方。

Answer 1

出现问题的原因是交换后，您还要删除原始类（对于小框显示）并替换为新类（对于较大的显示）。 这三个都发生在一个阻塞呼叫中。 无论何时添加元素，浏览器都需要触发重排，但在每个步骤后都不会触发重排，因为这样做会影响性能。 因此，回流发生在最后（在执行removeClass和addClass之后），因此只有一个元素具有在屏幕上绘制的新类 - 没有状态改变，因此也没有转换。

为了解决这个问题，我们需要强制UA在交换之后但在类更改之前触发重排/重绘 。 这可以通过两种方式完成 - 一种是强制类更改语句进入不同的函数调用（使用setTimeout匿名函数），另一种是强制UA计算像clientHeight等的东西（它们强制重绘，因为它们只能然后计算实际高度）。

使用setTimeout进行演示 | 使用clientHeight进行演示