用AngularJS和ng-animate在列表中移動項目的好方法是什麼？

Question

我希望能夠對列表重新排序，現在我在每個項目上都有按鈕將它們在列表中上下移動。我想使用ng-animate使項目順利移動，但我只能找到-move動畫，而且這顯然只適用於兩個切換位置的頂部元素。我無法讓它看起來正確。這是我到目前爲止有：Fiddle

.person-move { 
    transition: all 0.5s; 
    position: relative; 
    height: 0; 
} 

.person-move.person-move-active { 
    height: 26px; 
    overflow: hidden; 
} 

我想我不知道的-move目的。我正在交換兩個人的地方，但它似乎隻影響了第一個人。我希望它看起來像被交換。在樣品小提琴有一個複選框來創建新的對象，而不是移動現有的火 - 輸入和-leave，也許我可以使用這兩種方法：

1. 使用-move爲頂級人（誰曾經是低於），通過創建一個新的對象，動畫相對位置向上動畫
2. 使用-enter爲底的人相對位置

是否有更簡單或更好的方式來做到這一點？

其他想法： 東西像jQuery-UI的拖放將是不錯，但我不希望有包括它，看看我能得到它與AngularJS工作。

Answer 1

很多亂搞的，我得到它的工作我使用CSS下一個兄弟選擇，+想要的方式：（Fiddle）

.person-move { 
    position: relative; 
    top: 26px; 
} 

.person-move.person-move-active { 
    transition: all 0.5s ease; 
    top: 0; 
} 

.person-move + div { 
    /* cannot have transition on this element */ 
    /*transition: all 1s ease;*/ 
    position: relative; 
    top: -26px; 
} 

.person-move.person-move-active + div { 
    transition: all 0.5s ease; 
    position: relative; 
    top: 0; 
} 

的關鍵是有過渡的風格只在活躍的類選擇器上。我在yearofmoo上看到的例子讓它們在基類上，我看不到任何理由，因爲那些僅僅是爲了設置我相信的動畫的初始條件。無論如何，Chrome並不喜歡它，並且在使用兄弟選擇器時嘗試動畫​​到初始狀態。