自定义过渡的类名
我们可以通过以下 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>
