Vue，动画-修改v-前缀

约定不等于承诺〃 2021-11-16 06:58 280阅读 0赞

# Vue，动画-修改v-前缀 #

将transition取个 name 的名字，然后把v改成 name 的名字

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     
     8     <script src="../js/vue.js"></script>
     9     
    10     <style>
    11         /* v-enter 这是一个时间点 是进入之前, 元素的起始状态, 此时还没有开始进入 */
    12         /* v-leave-to 这是一个时间点  是动画离开之后, 离开的终止状态, 此时, 元素 动画已经结束了 */
    13         .v-enter,
    14         .v-leave-to{
         
    15             /* 透明度为0 */
    16         opacity: 0;      
    17             /* 位移(x) */
    18         transform: translateX(180px);
    19         }
    20         
    21         /* v-enter-active [入场动画的时间段] */
    22         /* v-leave-active [离场动画的时间段] */
    23         .v-enter-active,
    24         .v-leave-active{
         
    25             /* 渐变 */
    26             transition: all 1s ease;
    27         }
    28         
    29         .my-enter,
    30         .my-leave-to{
         
    31         opacity: 0;      
    32             /* 位移(x) */
    33         transform: translateX(80px);
    34         }
    35         
    36         .my-enter-active,
    37         .my-leave-active{
         
    38             transition: all 4s ease;
    39         }
    40     </style>
    41     <body>
    42         <div id="app">
    43             <input type="button" value="toggle" @click="flag=!flag">
    44             
    45             
    46             
    47             <transition>
    48                 <h3 v-if="flag">这是一个h3</h3>
    49             </transition>
    50     
    51         <hr>
    52         
    53         <input type="button" value="toggle" @click="flag2=!flag2">
    54         <transition name="my">
    55             <h6 v-if="flag2">这是一个h6</h6>
    56         </transition>
    57         
    58         </div>
    59         
    60     </body>
    61 </html>
    62 <script>
    63     var vm = new Vue({
    64         el:'#app',
    65         data:{
    66             flag: false,
    67             flag2: false
    68         },
    69         methods:{
    70             
    71         }
    72     })
    73 </script>

# 官方文档 #

![1709882-20190627084013397-321816760.png][]

![1709882-20190627084031130-2014990954.png][]

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11094237.html

[1709882-20190627084013397-321816760.png]: /images/20211116/1f8d3d20cc8644ad96457095506d103e.png
[1709882-20190627084031130-2014990954.png]: /images/20211116/be01be99e6324cb6bb6163c0b1ae9e88.png