vue中实现弹出层动画效果的示例代码

212 阅读 0 评论 140 点赞

我是靠谱客的博主甜蜜乌龟，这篇文章主要介绍vue中实现弹出层动画效果的示例代码，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
<template>
 <div class="home">
 
  <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->
  <transition name="mybox">
   <div class="box" v-show="boxshow"></div>
  </transition>
  
  <button @click="togglebox">按钮</button>
 </div>
</template>

复制代码

1
2
3
4
5
data() {
  return {
   boxshow: false,
  };
 },

复制代码

1
2
3
4
5
methods: {
  togglebox: function () {
   this.boxshow = !this.boxshow;
  },
 },

样式：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>