vue中實(shí)現(xiàn)彈出層動(dòng)畫(huà)效果的示例代碼
更新時(shí)間：2020年09月25日 10:37:03 作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)
這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動(dòng)畫(huà)效果，由上而下漸漸顯示，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
1
<template> <div class="home"> <!-- 首先將要過(guò)渡的元素用transition包裹，并設(shè)置過(guò)渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click="togglebox">按鈕</button> </div> </template>
2
data() {
return {
boxshow: false,
};
},
3
methods: {
togglebox: function () {
this.boxshow = !this.boxshow;
},
},
樣式：
<style lang="scss" scoped>
.box {
height: 500px;
background-color: rgb(245, 224, 224);
overflow: hidden;
}
/* 給過(guò)渡的name加樣式 */
.mybox-leave-active,
.mybox-enter-active {
transition: all 1s ease;
}
.mybox-leave-active,
.mybox-enter {
height: 0px !important;
}
.mybox-leave,
.mybox-enter-active {
height: 500px;
}
</style>
效果
到此這篇關(guān)于vue中實(shí)現(xiàn)彈出層動(dòng)畫(huà)效果的示例代碼的文章就介紹到這了,更多相關(guān)vue彈出層動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過(guò)本文帶領(lǐng)大家去學(xué)習(xí)vue3.0 CLI - 2.5 - 了解組件的三維的相關(guān)知識(shí)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-09-09
vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
Vue中使用虛擬dom且根據(jù)diff算法進(jìn)行新舊DOM對(duì)比,從而更新真實(shí) dom,key是虛擬DOM對(duì)象的唯一標(biāo)識(shí),在diff算法中key起著極其重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue中為什么不推薦用index做key的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通常可以通過(guò)路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
Vue生產(chǎn)和開(kāi)發(fā)環(huán)境如何切換及過(guò)濾器的使用
本文主要介紹了Vue生產(chǎn)、開(kāi)發(fā)環(huán)境如何切換及過(guò)濾器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
組件是Vue是一個(gè)可以重復(fù)使用的Vue實(shí)例, 它擁有獨(dú)一無(wú)二的組件名稱(chēng),它可以擴(kuò)展HTML元素,以組件名稱(chēng)的方式作為自定義的HTML標(biāo)簽，這篇文章主要介紹了vue組件component的注冊(cè)與使用,需要的朋友可以參考下2022-08-08
Vue項(xiàng)目分包打包配置(包含dev)完整過(guò)程
最近接到一個(gè)需求,公司需要對(duì)vue項(xiàng)目實(shí)現(xiàn)線(xiàn)上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06