可通過CSS3動畫排序的jQuery UI

Question

我的頁面上有可排序的小部件，排序工作得很好，所以我想用一些CSS3動畫來修飾它。 動畫有效，但只有一種方式！

拖動項目時，動畫會稍微傾斜，按照CSS動畫。 但是，當放置一個項目時，我無法使動畫反轉，因此在放置該項目時沒有動畫，而該項目只能卡入到位。

放置物品時如何獲得動畫？

可以在代碼下面的JSFiddle鏈接中嘗試運行代碼。

---

HTML：

<div class="Container">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
</div>

CSS：

.Container > .Item {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #ccc;
    margin: 0 10px 10px 0;
    padding: 20px 40px;
    border-radius: 5px;
    transition: transform 0.5s;
}

.Container > .Item[class~=ui-sortable-helper] {
    transform: rotate(10deg);
}

---

JSFiddle： http : //jsfiddle.net/GTHvidsten/jjucxzdk/

Answer 1

已更新，將transitionend事件的選擇器調整為ui-sortable-helper - css中具有transform屬性的同一class -而不是.Container

嘗試利用transitionend事件

$(document).ready(function() {
    $(".Container").sortable({
        cursor : 'move',
        revert : true
    })
    .find(".Item[class~=ui-sortable-helper]")
    .on("transitionend", function(e) {
        $(this).css("transform", "rotate(0deg)")
    });
});

jsfiddle http://jsfiddle.net/jjucxzdk/2/