Jquery 将元素移动到其他父元素后，CSS转换未运行

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

逻辑是：

• 将

  hidden

  类添加到元素中以使其淡出（

  opacity:0，width:0，加上transition

  ）
• 转换结束时，将元素移动到另一个列表
• 删除

  hidden

  类，使元素淡入

---

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>

JS

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

$(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”）。切换类（“隐藏”）；

）时，

淡入和
淡出动画都会运行

这个问题在这里得到了证明。
我无法向您解释为什么这样做，但是设置一个超时（即使是1ms）似乎可以让它工作

看

相关代码

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


编辑1：
经过测试，Chrome和FF似乎可以像我们预期的那样处理这个问题，但IE10不想这样做。将超时设置为50左右就可以了


谢谢很奇怪，但它奏效了。1毫秒在IE上不起作用的原因是，不同的浏览器对计时器有不同的刻度（IE将1取整为0，而其他浏览器将1取整为下一个可接受的值）。通常最好至少延迟20毫秒。
$item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    $item.appendTo(newParentSelector);
    setTimeout(function() {
            $item.removeClass('hidden');
    }, 50);
});