完成transition-group

src/App.vue

@@ -1,19 +1,24 @@
 <template>
   <div id="app">
-    <router-link class="p-3" to="/">首頁</router-link>
+    <!-- <router-link class="p-3" to="/">首頁</router-link>
     <router-link class="p-3" to="/test">測試頁</router-link>
     <transition name="slide" mode="out-in">
       <router-view class="mt-4"></router-view>
-    </transition>
+    </transition> -->
+
+    <grouptransition></grouptransition>
   </div>
 </template>
 
 <script>
-import router from "./router";
+// import router from "./router";
+import grouptransition from './components/grouplistSample.vue'
 
 export default {
   name: "app",
-  router
+  components:{
+    grouptransition
+  }
 };
 </script>
 
@@ -37,15 +42,15 @@ export default {
 
 .slide-enter{
   opacity:0;
-  transform:translateX(20px);
+  transform:translateX(-20px);
 }
 .slide-leave-active,
 .slide-enter-active{
   transition:all 0.3s ease-out;
 }
 .slide-leave-to{
   opacity:0;
-  transform:translateX(-20px);
+  transform:translateX(20px);
 }
 
 // 關於 transform 的用法，可以用 transform:translateX

src/components/grouplistSample.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <input type="text" name="a1" id="a1" v-model="text" style="margin-right:1rem;" />
+    <input @click="appendClick" type="button" class="btn btn-primary" value="新增" />
+    <transition-group tag="ul" name="slide">
+      <li v-for="item in testList" :key="item.id">{{item.id}} - {{item.title}}</li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  // 這裡要完成一個 group transition 把資料加到 ul 內
+  data() {
+    return {
+      text: "",
+      testList: []
+    };
+  },
+  methods: {
+    appendClick() {
+      const vm = this;
+      if (vm.text.trim() !== "") {
+        const maxid = vm.testList.reduce(
+          (prev, curr) => {
+            const max = Math.max(Number(prev.id), Number(curr.id)) + 1;
+            return { id: max };
+          },
+          {
+            id: 1
+          }
+        ).id;
+        vm.testList.push({
+          id: maxid,
+          title: vm.text
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// 這個時候可以考慮用 transition-group
+// OK 完成了!，如果要 transition-group 
+// 要用 tag 去處理。把物件變為可以用的
+// 當出現和消失的狀態可以用的時候可以考慮用 transition-group
+.slide-enter {
+  opacity: 0;
+  transform:translateY(10px);
+}
+.silde-leave-active,
+.slide-enter-active {
+  transition: all 0.5s ease-out;
+}
+.silder-leave-to {
+  opacity: 0;
+  transform:translateY(-10px);
+}
+</style>