增加第三方库实现动画效果，归档学习进度

20_脚手架/vue_code/17.src_过度与动画/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Test/>
+    <Test2/>
+    <Test3/>
+  </div>
+</template>
+
+<script>
+import Test from "./components/Test.vue"
+import Test2 from "./components/Test2.vue"
+import Test3 from "./components/Test3.vue"
+
+export default {
+  name: "App",
+  components: {
+    Test,
+    Test2,
+    Test3
+  },
+}
+</script>
+
+<style>
+</style>

20_脚手架/vue_code/17.src_过度与动画/components/Test.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  Vue默认实现动画方式  -->
+<!--  :appear="true"  -->
+    <transition appear>
+      <h1 v-show="isShow" class="come">你好啊！</h1>
+    </transition>
+<!--  自定义名称实现动画  -->
+    <transition name="hello">
+      <h1 v-show="isShow" class="come">你好啊！</h1>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Test",
+  data() {
+    return {
+      isShow: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  background-color: orange;
+  width: 300px;
+}
+
+/*Vue默认实现动画方式*/
+.v-enter-active{
+  animation: demo 0.5s linear;
+}
+.v-leave-active{
+  animation: demo 0.5s linear reverse;
+}
+
+/*自定义名称实现动画*/
+.hello-enter-active{
+  animation: demo 0.5s linear;
+}
+.hello-leave-active{
+  animation: demo 0.5s linear reverse;
+}
+
+@keyframes demo {
+  from{
+    transform: translateX(-100%);
+  }
+  to{
+    transform: translateX(0px);
+  }
+}
+</style>

20_脚手架/vue_code/17.src_过度与动画/components/Test2.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  自定义名称实现动画  -->
+    <transition-group name="hello" appear>
+      <h1 v-show="!isShow" class="come" key="1">你好啊！</h1>
+      <h1 v-show="isShow" class="come" key="2">哈哈哈！</h1>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Test",
+  data() {
+    return {
+      isShow: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  background-color: orange;
+  width: 300px;
+}
+
+/*过度动画进入的起点和离开的终点*/
+.hello-enter,.hello-leave-to{
+  transform: translateX(-100%);
+}
+/*过度动画进入的终点和离开的起点*/
+.hello-enter-to, .hello-leave{
+  transform: translateX(0);
+}
+/*动画效果*/
+.hello-enter-active, .hello-leave-active {
+  transition: 0.5s linear;
+}
+</style>

20_脚手架/vue_code/17.src_过度与动画/components/Test3.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  自定义名称实现动画  -->
+    <transition-group
+        appear
+        name="animate__animated animate__bounce"
+        enter-active-class="animate__swing"
+        leave-active-class="animate__backOutUp"
+    >
+      <h1 v-show="!isShow" class="come" key="1">你好啊！</h1>
+      <h1 v-show="isShow" class="come" key="2">哈哈哈！</h1>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import 'animate.css'
+export default {
+  name: "Test",
+  data() {
+    return {
+      isShow: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  background-color: orange;
+  width: 300px;
+}
+</style>

20_脚手架/vue_code/17.src_过度与动画/main.js

@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue_code",
       "version": "0.1.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "core-js": "^3.8.3",
         "pubsub-js": "^1.9.4",
         "vue": "^2.6.14"
@@ -3170,6 +3171,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -13274,6 +13280,11 @@
       "dev": true,
       "requires": {}
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",

20_脚手架/vue_code/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "core-js": "^3.8.3",
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.14"

20_脚手架/vue_code/src/App.vue

@@ -2,18 +2,21 @@
   <div>
     <Test/>
     <Test2/>
+    <Test3/>
   </div>
 </template>
 
 <script>
 import Test from "./components/Test.vue"
 import Test2 from "./components/Test2.vue"
+import Test3 from "./components/Test3.vue"
 
 export default {
   name: "App",
   components: {
     Test,
-    Test2
+    Test2,
+    Test3
   },
 }
 </script>

20_脚手架/vue_code/src/components/Test3.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  自定义名称实现动画  -->
+    <transition-group
+        appear
+        name="animate__animated animate__bounce"
+        enter-active-class="animate__swing"
+        leave-active-class="animate__backOutUp"
+    >
+      <h1 v-show="!isShow" class="come" key="1">你好啊！</h1>
+      <h1 v-show="isShow" class="come" key="2">哈哈哈！</h1>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import 'animate.css'
+export default {
+  name: "Test",
+  data() {
+    return {
+      isShow: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  background-color: orange;
+  width: 300px;
+}
+</style>