Vue 過(guò)渡（動(dòng)畫）transition組件案例詳解
Vue過(guò)度(動(dòng)畫)，本質(zhì)走的是CSS3：transtion，animation。
控制器div顯示/隱藏，代碼如下：
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<div id="div1" v-show="isShow"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isShow:false
},
methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
</script>
我們已經(jīng)實(shí)現(xiàn)了對(duì)div的顯示/隱藏，但是沒(méi)有過(guò)渡（動(dòng)畫）效果。
1.單元素/組件的過(guò)渡
Vue提供了transition的封裝組件，在下列情況中，可以給任何元素和組件添加”進(jìn)入”和”離開(kāi)”過(guò)渡動(dòng)畫。
條件渲染 （使用 v-if）
條件展示 （使用 v-show）
動(dòng)態(tài)組件
組件根節(jié)點(diǎn)
改造：
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<transition name="fade">
<div id="div1" v-show="isShow" transiton="fade"></div>
</transition>
</div>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
其他更多過(guò)渡動(dòng)畫方法，請(qǐng)看文檔：http://cn.vuejs.org/v2/guide/transitions.html
以上所述是小編給大家介紹的Vue 過(guò)渡（動(dòng)畫）transition組件案例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了如何在 Vue.js 中使用第三方j(luò)s庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（二）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（二），非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Vue3中如何使用rem來(lái)控制字體大小問(wèn)題
這篇文章主要介紹了Vue3中如何使用rem來(lái)控制字體大小問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
解決vue偵聽(tīng)器watch,調(diào)用this時(shí)出現(xiàn)undefined的問(wèn)題
這篇文章主要介紹了解決vue偵聽(tīng)器watch,調(diào)用this時(shí)出現(xiàn)undefined的問(wèn)題，具有很好的參考2020-10-10
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
@vue/cli4.x版本的vue.config.js常用配置方式
這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue中實(shí)現(xiàn)動(dòng)態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項(xiàng)目中動(dòng)態(tài)更新 JSON 數(shù)據(jù),可以通過(guò)以下幾種方式實(shí)現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲(chǔ)在前端還是后端、是否需要持久化等,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04