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

更新时间：2020年09月25日 10:37:03 作者：谷歌研发技术团队

这篇文章主要介绍了vue中怎样实现弹出层动画效果，由上而下渐渐显示，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

<template>
 <div class="home">
 
  <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->
  <transition name="mybox">
   <div class="box" v-show="boxshow"></div>
  </transition>
  
  <button @click="togglebox">按钮</button>
 </div>
</template>

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

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弹出层动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js循环radio的实例
今天小编就为大家分享一篇vue.js循环radio的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue使用screenfull插件实现全屏功能
这篇文章主要为大家详细介绍了vue使用screenfull插件实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
使用vue-cli webpack 快速搭建项目的代码
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
vue获取当前点击的元素并传值的实例
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
浅析vue插槽和作用域插槽的理解
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
2019-04-04
一文总结Vue和React的异同
这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-05-05
Vue+ElementUI使用vue-pdf实现预览功能
这篇文章主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue实现element-ui对话框可拖拽功能
这篇文章主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
VUE屏幕整体滚动(滑动或滚轮)原生方法举例
为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下
2024-01-01
vue element 关闭当前tab 跳转到上一路由操作
这篇文章主要介绍了vue element 关闭当前tab 跳转到上一路由操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07