自定义过渡的类名

点击打开视频讲解更加详细

我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

首先安装Animate.css

npm install animate.css -- save 

在main.js中引入

import Vue from 'vue' import App from './App.vue' import store from './store' import router from './router' //引入ElementUI组件库 import ElementUI from 'element-ui'; //引入ElementUI全部样式 import 'element-ui/lib/theme-chalk/index.css'; //引入animate.css动画库 import animated from 'animate.css' // npm install animate.css --save安装，再引入  //插件引入 // import {Plugin1,Plugin2} from './plugins/plugins.js'  // 全局组件注册  // 第一个解决组件之间的循环引用方式 // import HelloWorld from './components/HelloWorld' // import Category from './components/Category' // Vue.component('HelloWorld',HelloWorld) // Vue.component('Category',Category)  Vue.config.productionTip = false  //使用ElementUI Vue.use(ElementUI) Vue.use(animated)  // Vue.use(Plugin1,'参数1') // Vue.use(Plugin2,'参数2')  new Vue({   store,   router,    render: h => h(App), }).$mount('#app') 

完整案例：

<template>   <div>      自定义过渡的类名        可以通过以下 attribute 来自定义过渡类名：        enter-class       enter-active-class       enter-to-class (2.1.8+)       leave-class       leave-active-class       leave-to-class (2.1.8+)       安装Animate.css => npm install animate.css -- save     <div id="example-3">       <button @click="show = !show">         Toggle render       </button>       <transition         name="custom-classes-transition"         enter-active-class="animate__animated animate__swing"         leave-active-class="animate__animated animate__flash"       >         <p v-if="show">hello</p>       </transition>     </div>   </div> </template> <script> export default {   name: 'home',   data(){     return {        show:false     }    },   created(){        },   mounted() {        },   computed:{        },   methods:{        } } </script>  <style scoped>  </style> 

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！