自定义类名比普通类名优先级更高,在使用 第三方CSS动画库时非常有用。

    ·用于设置自定义过渡类名的属性如下:

    enter-class

    enter-active-class

    enter-to-class

    leave- class

    leave- active-class

    leave-to- class

    ·用于设置初始过渡类名的属性如下:

    appear-class

    appear-to-class

    appear-active-class

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: all .5s; } .test { transition: all 3s; } </style> </head> <body> <div id=“app”> <button @click=“show = !show”>切换</button> <transition enter-active-class=“test” leave-active-class=“test” > <p v-if=“show”>这是 p 标签</p> </transition> </div> <script src=“./lib/vue.js”></script> <script> new Vue({ el: ‘#app’, data: { show: true } }); </script> </body> </html>

    Animate.css是一个第三方CSS动画库,通过设置类名来给元素 添加各种动画效果

    ·使用注意:

    · animate__前缀与compat版本

    · 基础类名 animated

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> <link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css“ /> </head> <body> <div id=“app”> <button @click=“show = !show”>按钮</button> <transition enter-active-class=“animate__bounceInDown” leave-active-class=“animate__bounceOutDown” > <p v-if=“show” class=“animate__animated” >hello world</p> </transition> </div> <script src=“lib/vue.js”></script> <script> new Vue({ el: ‘#app’, data: { show: true } }); </script> </body> </html>