元素移动到不同的父元素后，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动画运行。