Add transition to draggable for smother moves

resources/js/views/Accounts.vue

@@ -32,7 +32,8 @@
                 readyLabel: '',
                 loadingLabel: 'refreshing'
                 }" > -->
-                <draggable v-model="filteredAccounts" @end="saveOrder" handle=".tfa-dots" class="accounts columns is-multiline is-centered">
+                <draggable v-model="filteredAccounts" @start="drag = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts columns is-multiline is-centered">
+                    <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                         <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
                             <div class="tfa-container">
         	                    <transition name="slideCheckbox">
@@ -64,6 +65,7 @@
                                 </transition>
                             </div>
                         </div>
+                    </transition-group>
                 </draggable>
             <!-- </vue-pull-refresh> -->
         </div>
@@ -153,6 +155,7 @@
                 form: new Form({
                     qrcode: null
                 }),
+                drag: false,
             }
         },
 
@@ -256,6 +259,7 @@
             },
 
             saveOrder() {
+                this.drag = false
                 this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
             },
 
@@ -311,3 +315,14 @@
     };
 
 </script>
+
+<style>
+    .flip-list-move {
+      transition: transform 0.5s;
+    }
+
+    .ghost {
+      opacity: 1;
+      /*background: hsl(0, 0%, 21%);*/
+    }
+</style>