將元素移動到不同的父元素後，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); 
});