jquery - CSS transition not running after element is moved to different parent -

i got 2 list of elements , want move items 1 list simple css transition.

the logic:

• add hidden class element in order fade out (opacity: 0, width: 0, plus transition)
• when transition ends move element list
• remove hidden class element fade-in

---

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: 1s ease-in-out;        -moz-transition: 1s ease-in-out;          -o-transition: 1s ease-in-out;             transition: 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');         });      }); }); 

---

when on li item .hidden class added transition animation runs expected. when li item moved list , .hidden class removed transition animation not running item appears correct opacity , width.

the weirder thing when toggle 'hidden' class of item manually (i.e $('#item2').toggleclass('hidden'); ) both fade-in , fade-outanimations run.

the problem demonstrated in fiddle .

i can't explain why works, setting timeout (even if 1ms) seems make work.

see fiddle.

relevant code

$item.one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(e) {     $item.appendto(newparentselector);     settimeout(function() {            $item.removeclass('hidden');     }, 1); }); 

---

edit 1: after testing seems chrome , ff deal expect ie10 doesn't want to. setting timeout of around 50 should trick.

updated fiddle.

$item.one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(e) {     $item.appendto(newparentselector);     settimeout(function() {             $item.removeclass('hidden');     }, 50); });