hook測試

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.3.2",
     "fibers": "^4.0.2",
     "sass": "^1.23.3",
+    "velocity-animate": "^1.5.2",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3"
   },

src/App.vue

@@ -5,19 +5,20 @@
     <transition name="slide" mode="out-in">
       <router-view class="mt-4"></router-view>
     </transition> -->
-
-    <grouptransition></grouptransition>
+    <!-- <grouptransition></grouptransition> -->
+    <animatinghook></animatinghook>
   </div>
 </template>
 
 <script>
 // import router from "./router";
-import grouptransition from './components/grouplistSample.vue'
+// import grouptransition from './components/grouplistSample.vue'
+import animatinghook from './components/animatinghook.vue'
 
 export default {
   name: "app",
   components:{
-    grouptransition
+    animatinghook
   }
 };
 </script>

src/components/animatinghook.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <input @click="testclick" type="button" class="btn btn-primary" value="toggle" />
+    <transition>
+      <leftsidemenu v-if="status"></leftsidemenu>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Velocity from 'velocity-animate'
+import leftsidemenu from "@/components/leftsidemenu.vue";
+// 這裡用 velocity-animated 去實現。
+export default {
+  components: {
+    leftsidemenu
+  },
+  data() {
+    return {
+      status: false
+    };
+  },
+  methods: {
+    // 這裡了解一下 velocity 去處理 transition hook 
+    testclick() {
+      const vm = this;
+      vm.status = !vm.status;
+    },
+    beforeEnter(){
+
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/leftsidemenu.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="left-fix">
+    <ul class="ul-dec">
+      <li>item1</li>
+      <li>item2</li>
+      <li>item3</li>
+      <li>item4</li>
+      <li>item5</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="scss">
+.left-fix {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: #91c3b3;
+  border-style: solid;
+  border-width: 0;
+  border-radius: 1rem;
+  width: 15rem;
+  padding: 1.5rem;
+}
+.ul-dec li {
+  list-style: none;
+  padding:.25rem;
+}
+</style>