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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

2

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

  

 

  
1
  
2
  
3
  
4
  
5
 

3

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

  

 

  
1
  
2
  
3
  
4
  
5
 

样式：

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

效果

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/108776031