使用过度效果实现动画

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>

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>