vue中組件的過渡動(dòng)畫及實(shí)現(xiàn)代碼
更新時(shí)間：2018年11月21日 11:56:06 作者：先去前面探探路
這篇文章主要介紹了vue中組件的過渡動(dòng)畫，并通過實(shí)例代碼給大家介紹了過渡動(dòng)畫的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1. 和多個(gè)元素的過渡一樣，用組件來替換transition中包裹的標(biāo)簽
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s
}
</style>
</head>
<body>
<div id="demo">
<button @click="show = !show">click me</button>
<transition name="fade" mode="in-out">
<child-one v-if="show"></child-one>
<child-two v-else></child-two>
</transition>
</div>
<script>
Vue.component('child-one', {
template: `<div>child-one</div>`
})
Vue.component('child-two', {
template: `<div>child-two</div>`
})
new Vue({
el: '#demo',
data: {
show: true
},
})
</script>
2. 動(dòng)態(tài)組件：component組件 :is 屬性，來實(shí)現(xiàn)組件的過渡效果
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s
}
</style>
</head>
<body>
<div id="demo">
<button @click="handleClick">click me</button>
<transition name="fade" mode="in-out">
<component :is="type"></component>
</transition>
</div>
<script>
Vue.component('child-one', {
template: `<div>child-one</div>`
})
Vue.component('child-two', {
template: `<div>child-two</div>`
})
new Vue({
el: '#demo',
data: {
type: 'child-one'
},
methods:{
handleClick () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})
</script>
PS：下面看下Vue過渡動(dòng)畫實(shí)現(xiàn)
實(shí)現(xiàn)一個(gè)點(diǎn)擊切換元素的隱藏和顯示狀態(tài)!
<div id="app">
<transition>
<p v-if="show">Hello World</p>
</transition>
<button @click="toggle">切換</button>
</div>
需要把加入動(dòng)畫的元素放在transition組件內(nèi),定義一個(gè)按鈕的切換方法
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
}
}
})
</script>
給不同狀態(tài)下添加相應(yīng)的樣式
.v-enter,.v-leave-to{
opacity:0;
}
.v-enter-active,.v-leave-to{
color:#00BFFF;
transition: opacity 3s;
}
可以給transition添加一個(gè)name,如果name為"fade",則class前綴為指定的name
動(dòng)畫過程中類名的變化
我們可以自定義類名,在元素屬性中添加進(jìn)入狀態(tài) enter-active-class,和離開狀態(tài)leave-active-class
總結(jié)
以上所述是小編給大家介紹的vue中組件的過渡動(dòng)畫及實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Vue入門之a(chǎn)nimate過渡動(dòng)畫效果
- vue實(shí)現(xiàn)列表滾動(dòng)的過渡動(dòng)畫
- 使用vue-router切換頁面時(shí)實(shí)現(xiàn)設(shè)置過渡動(dòng)畫
- Vue 解決路由過渡動(dòng)畫抖動(dòng)問題(實(shí)例詳解)
- Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫
- Vue動(dòng)畫事件詳解及過渡動(dòng)畫實(shí)例
- 簡單談?wù)剉ue的過渡動(dòng)畫(推薦)
- 解決vue的過渡動(dòng)畫無法正常實(shí)現(xiàn)問題
- Vue中的基礎(chǔ)過渡動(dòng)畫及實(shí)現(xiàn)原理解析
- Vue中實(shí)現(xiàn)過渡動(dòng)畫效果實(shí)例詳解
相關(guān)文章
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
頁面水印大家或許都不陌生，本文主要介紹了Vue之全局水印的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了vue 解決IOS10低版本白屏的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue3中關(guān)于i18n字符串轉(zhuǎn)義問題
這篇文章主要介紹了vue3中關(guān)于i18n字符串轉(zhuǎn)義問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04