vue中實(shí)現(xiàn)彈出層動(dòng)畫效果的示例代碼

更新時(shí)間：2020年09月25日 10:37:03 作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動(dòng)畫效果，由上而下漸漸顯示，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

<template>
 <div class="home">
 
  <!-- 首先將要過渡的元素用transition包裹，并設(shè)置過渡的name -->
  <transition name="mybox">
   <div class="box" v-show="boxshow"></div>
  </transition>
  
  <button @click="togglebox">按鈕</button>
 </div>
</template>

data() {
  return {
   boxshow: false,
  };
 },

methods: {
  togglebox: function () {
   this.boxshow = !this.boxshow;
  },
 },

樣式：

<style lang="scss" scoped>
.box {
 height: 500px;
 background-color: rgb(245, 224, 224);
 overflow: hidden;
}

/* 給過渡的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)畫效果的示例代碼的文章就介紹到這了,更多相關(guān)vue彈出層動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目引入字體.ttf的方法
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題,文中有相關(guān)的代碼講解,需要的朋友可以參考下
2023-08-08
Vue.use源碼分析
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
Vue中methods實(shí)現(xiàn)原理是什么
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進(jìn)行的呢,本文給大家介紹Vue中methods實(shí)現(xiàn)原理是什么,感興趣的朋友一起看看吧
2023-11-11
vue仿網(wǎng)易云音樂播放器界面的簡單實(shí)現(xiàn)過程
興趣乃學(xué)習(xí)的動(dòng)力,想自己動(dòng)手寫個(gè)音樂播放器,查了網(wǎng)上一些博客寫了一個(gè),這篇文章主要給大家介紹了關(guān)于vue仿網(wǎng)易云音樂播放器界面的簡單實(shí)現(xiàn)過程,需要的朋友可以參考下
2021-11-11
Vue插槽_特殊特性slot,slot-scope與指令v-slot說明
這篇文章主要介紹了Vue插槽_特殊特性slot,slot-scope與指令v-slot說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
詳解Vue的七種傳值方式
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
Vue3圖片上傳報(bào)錯(cuò)：Required?part?‘file‘?is?not?present.的原因及解決方法
這篇文章主要介紹了Vue3圖片上傳報(bào)錯(cuò)：Required?part?‘file‘?is?not?present.的原因及解決方法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家解決問題有一定的幫助,需要的朋友可以參考下
2024-09-09
vue中各種deep的區(qū)別解析
在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語法更簡潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧
2024-10-10