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

1

2

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

3

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

样式：

.box {
 height: 500px;
 background-color: rgb(245, 224, 224);
 overflow: hidden;
}



.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;
}

效果

到此这篇关于vue中实现弹出层动画效果的示例代码的文章就介绍到这了,更多相关vue弹出层动画内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！