1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10.     <style>
    11.         .v-enter,
    12.         .v-leave-to {
    13.             opacity: 0;
    14.             transform: translateX(200px)
    15.         }
    17.         .v-enter-active,
    18.         .v-leave-active {
    19.             transition: all 0.9s ease;
    20.         }
    23.         .my-enter,
    24.         .my-leave-to {
    25.             opacity: 0;
    26.             transform: translateY(200px)
    27.         }
    29.         .my-enter-active,
    30.         .my-leave-active {
    31.             transition: all 0.9s ease;
    32.         }
    33.     </style>
    35. </head>
    37. <body>
    38.     <div id="app">
    39.         <input type="button" value="点击" @click="flag=!flag">
    40.         <transition>
    41.             <h3 v-show="flag">这里是H3</h3>
    42.         </transition>
    43.         <hr>
    45.         <input type="button" value="点击11" @click="flag2=!flag2">
    46.         <!-- 如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my">，那么 v-enter 会替换为 my-enter。 -->
    47.         <transition name="my">
    48.             <h6 v-show="flag2">这里是H6</h6>
    49.         </transition>
    51.     </div>
    52.     <script>
    53.         var vm = new Vue({
    54.             el: '#app',
    55.             data: {
    56.                 flag: false,
    57.                 flag2: false
    58.             },
    59.             methods: {
    60.             }
    61.         });
    62.     </script>
    63. </body>
    65. </html>

    1.gif