Animation for orderlist

src/components/orderlist/OrderList.vue

@@ -10,12 +10,12 @@
             <div class="p-orderlist-caption" v-if="$slots.header">
                 <slot name="header"></slot>
             </div>
-            <ul ref="list" class="p-orderlist-list" :style="listStyle">
+            <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle">
                 <li  tabindex="0" v-for="(item, i) of value" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" 
                     @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd($event)">
                     <slot name="item" :item="item" :index="i"> </slot>
                 </li>
-            </ul>
+            </transition-group>
         </div>
     </div>
 </template>
@@ -57,13 +57,13 @@ export default {
     },
     updated() {
         if (this.reorderDirection) {
-            this.updateListScroll();
+            //this.updateListScroll();
             this.reorderDirection = null;
         }
     },
     methods: {
         getItemKey(item, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
         },
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
@@ -384,7 +384,7 @@ export default {
 }
 
 .p-orderlist.p-state-disabled .p-orderlist-list {
-    overflow:hidden;
+    overflow: hidden;
 }
 
 .p-orderlist .p-orderlist-droppoint {
@@ -392,6 +392,11 @@ export default {
     list-style-type: none;
 }
 
+.p-orderlist-flip-move {
+    transition: transform .2s;
+    z-index: 1;
+}
+
 @media (max-width: 767px) {
     .p-orderlist-controls {
         width: 100%;

src/views/orderlist/OrderListDemo.vue

@@ -8,14 +8,14 @@
         </div>
 
         <div class="content-section implementation">
-            <OrderList v-model="cars" header="List of Cars" listStyle="height:20em">
+            <OrderList v-model="cars" header="List of Cars" listStyle="height:20em" dataKey="vin">
                 <template #header>
                     List of Cars
                 </template>
                 <template #item="slotProps">
-                    <div class="p-clearfix">
-                        <img :src="'demo/images/car/' + slotProps.item.brand + '.png'" style="display:inline-block;margin:2px 0 2px 2px" width="48">
-                        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
+                    <div class="p-caritem">
+                        <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
+                        <div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
                     </div>
                 </template>
             </OrderList>
@@ -45,4 +45,27 @@ export default {
         'OrderListDoc': OrderListDoc
     }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.p-caritem {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    img {
+        display:inline-block;
+        margin:2px 0 2px 2px;
+        width: 48px;
+        height: 48px;
+    }
+
+    div {
+        font-size:14px;
+        float:right;
+        margin: 16px 6px 0 0;
+    }
+}
+</style>