自定义过渡的类名

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

我们可以通过以下 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')


完整案例：





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