自定義過渡的類名
點擊打開視頻講解更加詳細
我們可以通過以下 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-
leave-active-
>
<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站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503412.html
標籤：其他