脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue弹出层动画

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

 更新时间：2020年09月25日 10:37:03   作者：谷歌研发技术团队  
这篇文章主要介绍了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弹出层动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue项目引入字体.ttf的方法

    vue项目引入字体.ttf的方法

    今天小编就为大家分享一篇vue项目引入字体.ttf的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决Vue3使用Element-Plus导航刷新后active高亮消失的问题

    解决Vue3使用Element-Plus导航刷新后active高亮消失的问题

    这篇文章主要给大家介绍了如何解决Vue3使用Element-Plus导航刷新后active高亮消失的问题,文中有相关的代码讲解,需要的朋友可以参考下
    2023-08-08
  • Vue.use源码分析

    Vue.use源码分析

    这篇文章主要为大家详细介绍了Vue.use源码，Vue.use方法的引入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue中methods实现原理是什么

    Vue中methods实现原理是什么

    methods是如何绑定this的 methods绑定上下文执行环境是通过bind来进行的呢,本文给大家介绍Vue中methods实现原理是什么,感兴趣的朋友一起看看吧
    2023-11-11
  • vue仿网易云音乐播放器界面的简单实现过程

    vue仿网易云音乐播放器界面的简单实现过程

    兴趣乃学习的动力,想自己动手写个音乐播放器,查了网上一些博客写了一个,这篇文章主要给大家介绍了关于vue仿网易云音乐播放器界面的简单实现过程,需要的朋友可以参考下
    2021-11-11
  • Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解Vue的七种传值方式

    详解Vue的七种传值方式

    这篇文章主要介绍了Vue的七种传值方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-02-02
  • 使用 Vue 实现一个虚拟列表的方法

    使用 Vue 实现一个虚拟列表的方法

    这篇文章主要介绍了使用 Vue 实现一个虚拟列表的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法

    Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法

    这篇文章主要介绍了Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下
    2024-09-09
  • vue中各种deep的区别解析

    vue中各种deep的区别解析

    在Vue3中,推荐使用::deep作为深度选择器,它比Vue2中的::v-deep语法更简洁,::v-deep、::deep、:deep()、&gt;&gt;&gt;和/deep/都是用于穿透组件作用域的选择器,但Vue3更倾向于使用::deep或:deep(),感兴趣的朋友跟随小编一起看看吧
    2024-10-10

最新评论