1.     vue动画实现需要transition标签和class属性配合使用, 共有6个属性如下<br />            入场动画class:   v-enter,  v-enter-active,  v-enter-to<br />            出场动画class:   v-leave,  v-leave-active,  v-leave-to
    1.   <style>
    2.         /* vue中的transition组件渲染时,会给子标签添加以下几个class,用于设置动画过程 */
    3.         /* 设置transition的入场(创建显示过程)动画 */
    4.         .v-enter{  /*入场开始状态*/
    5.             transform: translateY(300px);
    6.             opacity: 0;
    7.         }
    8.         .v-enter-active{ /*入场过度的过程*/
    9.             transition: all 1s;
    10.         }
    11.         .v-enter-to{ /*入场结束状态*/
    12.             transform: translateY(0px);
    13.             opacity: 1;
    14.         }
    15.         /* 设置transition的出场(销毁隐藏过程)动画 */
    16.         .v-leave{  /*出场开始状态*/
    17.             transform: translateY(00px);
    18.             opacity: 1;
    19.         }
    20.         .v-leave-active{ /*出场过度的过程*/
    21.             transition: all 1s;
    22.         }
    23.         .v-leave-to{ /*出场结束状态*/
    24.             transform: translateY(300px);
    25.             opacity: 0;
    26.         }
    27.         /* 设置h1单独的过度样式 */
    28.         .binge-enter, .binge-leave-to{
    29.             color: red;
    30.         }
    31.         .binge-enter-active, .binge-leave-active{
    32.             transition: 3s;
    33.         }
    34.         .binge-enter-to, .binge-leave{
    35.             color: black;
    36.         }
    37.     </style>
    38. <body>
    39.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    40.     <div id='myApp'>
    41.         <button @click="bool=!bool">显示/隐藏</button>
    42.         <!-- 在通过v-if实现标签创建销毁时, 可以设置创建销毁时的过度效果 -->
    43.         <transition>
    44.             <h1 v-if="bool">李云迪嫖娼被抓,找张三做律师,会被判几年?</h1>
    45.         </transition>
    46.         <!-- transition有且只能有一个根标签,而且v-if条件必须设置在根标签上,  如果需要给多个标签设置动画, 需要在每一个标签外层添加transtion -->
    47.         <transition>
    48.             <div v-if="bool">
    49.                 <h2>2</h2>
    50.                 <h2>2</h2>
    51.             </div>
    52.         </transition>
    54.         <!-- 给某一个标签设置单独的过度效果, 可以给transition添加name 
    55.         然后设置class时把v-前缀换成name前缀, 如 v-enter ==> binge-enter-->
    56.         <transition name="binge">
    57.             <h1 v-if="bool">3333333333</h1>
    58.         </transition>
    61.     </div>
    62.     <script>
    63.         new Vue({
    64.             el: '#myApp',
    65.             data: {
    66.                 bool: true
    67.             },
    68.             methods: {
    70.             }
    71.         })
    72.     </script>
    73. </body>