Adding tranistion example

Author: David-Desmaisons

example/App.vue

@@ -64,6 +64,17 @@
           >Transition</a>
         </li>
 
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#transitions"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >Transitions</a>
+        </li>
+
         <li class="nav-item">
           <a
             class="nav-link"
@@ -154,6 +165,15 @@
         >
           <transition-example />
         </div>
+
+         <div
+          class="tab-pane show"
+          id="transitions"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <transition-example-2 />
+        </div>
       </div>
     </div>
   </div>
@@ -167,6 +187,8 @@ import footerslot from "./components/footerslot";
 import headerslot from "./components/headerslot";
 import handler from "./components/handler";
 import transitionExample from "./components/transition-example";
+import transitionExample2 from "./components/transition-example-2";
+
 
 export default {
   name: "app",
@@ -177,7 +199,8 @@ export default {
     footerslot,
     headerslot,
     handler,
-    transitionExample
+    transitionExample,
+    transitionExample2
   }
 };
 </script>

example/components/transition-example-2.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="justify-content-center jumbotron">
+    <div class="row">
+
+      <div class="col-2">
+        <button
+          class="btn btn-secondary button"
+          @click="sort"
+        >To original order</button>
+      </div>
+
+      <div class="col-6">
+        <h3>Transition</h3>
+        <draggable
+          class="list-group"
+          element="ul"
+          v-model="list"
+          :options="dragOptions"
+          @start="drag = true"
+          @end="drag = false"
+        >
+          <transition-group
+            type="transition"
+             :name="!drag? 'flip-list' : null"
+          >
+            <li
+              class="list-group-item"
+              v-for="element in list"
+              :key="element.order"
+            >
+              <i
+                :class="
+                element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
+              "
+                @click="element.fixed = !element.fixed"
+                aria-hidden="true"
+              ></i>
+              {{ element.name }}
+            </li>
+          </transition-group>
+        </draggable>
+      </div>
+
+      <rawDisplayer
+        class="col-3"
+        :value="list"
+        title="List"
+      />
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+
+const message = [
+  "vue.draggable",
+  "draggable",
+  "component",
+  "for",
+  "vue.js 2.0",
+  "based",
+  "on",
+  "Sortablejs"
+];
+
+export default {
+  name: "tranistion-example",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list: message.map((name, index) => {
+        return { name, order: index + 1, fixed: false };
+      }),
+      drag: false
+    };
+  },
+  methods:{
+    sort(){
+      this.list = this.list.sort((a,b) => a.order - b.order);
+    }
+  },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: "description",
+        disabled: false,
+        ghostClass: "ghost"
+      };
+    }
+  }
+};
+</script>
+
+<style>
+.button {
+  margin-top: 50px;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.list-group {
+  min-height: 20px;
+}
+
+.list-group-item {
+  cursor: move;
+}
+
+.list-group-item i {
+  cursor: pointer;
+}
+</style>