From 9d586acf0444aaabe1dd28340980b4e2028568a6 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Tue, 7 Feb 2023 09:35:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=BF=87=E5=BA=A6=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E5=AE=9E=E7=8E=B0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20_脚手架/vue_code/src/App.vue             |  5 ++-
 .../vue_code/src/components/Test2.vue         | 40 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 20_脚手架/vue_code/src/components/Test2.vue

diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index cafef59..654edd1 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,16 +1,19 @@
 <template>
   <div>
     <Test/>
+    <Test2/>
   </div>
 </template>
 
 <script>
 import Test from "./components/Test.vue"
+import Test2 from "./components/Test2.vue"
 
 export default {
   name: "App",
   components: {
-    Test
+    Test,
+    Test2
   },
 }
 </script>
diff --git a/20_脚手架/vue_code/src/components/Test2.vue b/20_脚手架/vue_code/src/components/Test2.vue
new file mode 100644
index 0000000..df5ee39
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/Test2.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  自定义名称实现动画  -->
+    <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;
+}
+
+/*过度动画进入的起点和离开的终点*/
+.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>
\ No newline at end of file