jquery - 将元素移动到不同的父级后，CSS 过渡不运行

Question

我有两个元素列表，我想通过简单的 CSS 转换将元素从一个列表移动到另一个列表。

逻辑:

• 将隐藏类添加到元素以使其淡出(不透明度:0，宽度:0，加上过渡)
• 当过渡结束时将元素移动到另一个列表
• 移除隐藏类，使元素淡入

---

HTML

<ul id="list1">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
</ul>

<ul id="list2">
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

CSS

...
li {
    display: block;
    float: left;
    height: 80px;
    margin: 0 2px;
    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
    width: 80px;
}

li.hidden {
    opacity: 0;
    width: 0;
}
...

JS

$(document).ready(function() {
    $('li').click(function() {
        var $item = $(this),
            parentId = $item.parent().attr('id'),
            newParentSelector = (parentId == 'list1') ? '#list2' : '#list1';


        $item.addClass('hidden');

        $item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
            $item.appendTo(newParentSelector);
            $item.removeClass('hidden');
        });

    });
});

---

当在 LI 项上添加 .hidden 类时，过渡动画会按预期运行。当 LI 元素移动到另一个列表并删除 .hidden 类时，过渡动画不会运行，但元素会以正确的不透明度和宽度显示。

更奇怪的是，当我手动切换元素的“隐藏”类时(即 $('#item2').toggleClass('hidden'); )两个 fade -in 和 fade-out 动画运行。

此问题在 fiddle 中得到了证明。 .

Answer 1

我无法向您解释为什么这行得通，但设置超时(即使是 1 毫秒)似乎可以让它行得通。

参见 fiddle .

相关代码

$item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    $item.appendTo(newParentSelector);
    setTimeout(function() {
           $item.removeClass('hidden');
    }, 1);
});

---

编辑 1:经过测试，似乎 Chrome 和 FF 会按照我们的预期处理此问题，但 IE10 不想这样做。将超时设置为 50 左右应该可以解决问题。

Updated fiddle .

$item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    $item.appendTo(newParentSelector);
    setTimeout(function() {
            $item.removeClass('hidden');
    }, 50);
});