vueでポップアップ層のアニメーション効果を実現する例示的なコード

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ポップアップ層のアニメコンテンツを紹介します。私たちの以前の文章を検索したり、以下の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。