将元素移动到不同的父元素后，CSS转换不运行

Question

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

逻辑：

• 的hidden类添加到元件以淡出出来（opacity: 0, width: 0, plus 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> 

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 CLA ss被添加过渡动画按预期运行。当LI项目被移动到另一个列表并且.hidden类被移除时，过渡动画不在运行，但该项目以正确的不透明度和宽度出现。

更奇特的是，当我手动切换某个项目的“隐藏”类别（即$('#item2').toggleClass('hidden');）时，fade-in和fade-out动画都会运行。

问题在此fiddle中得到证明。

Answer 1

我不能向你解释为什么这个工作，但设置一个超时（即使它是1ms）似乎使它的工作。

请参阅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); 
});