1

<template>
 <div class="home">
 
  <!-- 首先將要過渡的元素用transition包裹，並設定過渡的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;
}

/* 給過渡的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>

效果

到此這篇關於vue中實現彈出層動畫效果的示例程式碼的文章就介紹到這了,更多相關vue彈出層動畫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！