使用过度效果实现多个元素动画

3 years ago · 0944d4f659
parent 9d586acf04
commit 0944d4f659
1 changed files with 4 additions and 3 deletions
--- a/20_脚手架/vue_code/src/components/Test2.vue
+++ b/20_脚手架/vue_code/src/components/Test2.vue
@ -2,9 +2,10 @@
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
 <!--  自定义名称实现动画  -->
-    <transition name="hello">
-      <h1 v-show="isShow" class="come">你好啊！</h1>
-    </transition>
+    <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>