Add transition to footer slot example

Author: David-Desmaisons

example/components/footerslot.vue

@@ -4,9 +4,12 @@
       <h3>Draggable with footer</h3>
 
       <draggable
+        tag="transition-group"
+        :componentData="componentData"
         :list="list"
         class="list-group"
         draggable=".item"
+        :animation="100"
         @start="dragging = true"
         @end="dragging = false"
       >
@@ -23,14 +26,25 @@
           class="btn-group list-group-item"
           role="group"
           aria-label="Basic example"
+          key="footer"
         >
-          <button class="btn btn-secondary" @click="add">Add</button>
-          <button class="btn btn-secondary" @click="replace">Replace</button>
+          <button
+            class="btn btn-secondary"
+            @click="add"
+          >Add</button>
+          <button
+            class="btn btn-secondary"
+            @click="replace"
+          >Replace</button>
         </div>
       </draggable>
     </div>
 
-    <rawDisplayer class="col-3" :value="list" title="List" />
+    <rawDisplayer
+      class="col-3"
+      :value="list"
+      title="List"
+    />
   </div>
 </template>
 
@@ -51,7 +65,13 @@ export default {
         { name: "Joao", id: 1 },
         { name: "Jean", id: 2 }
       ],
-      dragging: false
+      dragging: false,
+      componentData: {
+        props: {
+          type: "transition",
+          name: "flip-list"
+        }
+      }
     };
   },
   methods: {
@@ -64,4 +84,12 @@ export default {
   }
 };
 </script>
-<style scoped></style>
+<style scoped>
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+</style>

example/components/transition-example.vue

@@ -16,7 +16,7 @@
         @start="isDragging = true"
         @end="isDragging = false"
       >
-        <transition-group type="transition" :name="'flip-list'">
+        <transition-group type="transition" name="flip-list">
           <li
             class="list-group-item"
             v-for="element in list"

src/vuedraggable.js

@@ -459,7 +459,10 @@ const draggableComponent = {
       const draggedContext = this.context;
       const futureIndex = this.computeFutureIndex(relatedContext, evt);
       Object.assign(draggedContext, { futureIndex });
-      const sendEvt = Object.assign({}, evt, { relatedContext, draggedContext });
+      const sendEvt = Object.assign({}, evt, {
+        relatedContext,
+        draggedContext
+      });
       return onMove(sendEvt, originalEvent);
     },