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

赞 (0)

相关推荐

  • vue-cli脚手架引入弹出层layer插件的几种方法

    1.如何引入 在vue-cli里,引入文件有几钟方法 一种是用npm或者cnpm指令去下载对应的插件,然后在main.js里用import方法引入,这里不讨论这种方法 我比较喜欢采用的是直接下载对应的js,然后引入到vue项目中去 问题来了,如何引入呢 方法如下: 下载对应的js文件或者css文件,一般下载插件相关联的都会在一起 进入vue-cli项目工程里的index.html文件,分别引入css文件和js文件 在这里,分别是 <link rel="stylesheet" hr

  • vue自定义正在加载动画的例子

    如下所示: loadingTimer(){ clearInterval(this.$el.loading_timer); const rotate_angle=30,speed=90; this.$el.loading_timer=setInterval(()=>{ const rotate_el=this.$el.querySelector('.rotate'); /*获得当前元素是transform值*/ let origin_angle=rotate_el.style.transform;

  • 在vue中实现点击选择框阻止弹出层消失的方法

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发中起着至关重要的作用.同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的.毕竟做出来,自己看着也舒服. 过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动 代码片段 这里为

  • vue-dialog的弹出层组件

    vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

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

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

  • Android 中从屏幕左下角弹出Dialog动画效果的实现代码

    MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi

  • javascript 弹出层居中效果的制作

    问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f

  • 在layui中layer弹出层点击事件无效的解决方法

    1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

  • vue实现右侧滑出层动画

    vue实现右侧滑出层动画

    本文实例为大家分享了vue实现右侧滑出层动画的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" co

  • three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    前言 大家好,这里是 CSS 魔法使--alphardex. 本文我们将用three.js来实现一种很酷的光学效果--露珠滴落.我们知道,在露珠从一个物体表面滴落的时候,会产生一种粘着的效果.2D平面中,这种粘着效果其实用css滤镜就可以轻松实现.但是到了3D世界,就没那么简单了,这时我们就得依靠光照来实现,其中涉及到了一个关键算法--光线步进(Ray Marching).以下是最终实现的效果图 撒,哈吉马路由! 准备工作 笔者的 three.js模板 :点击右下角的fork即可复制一份 正片

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    一.效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求.下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二.无缝滚动原理 1.容器宽高固定,超出内容隐藏: 2.内容准备2份,现参与滚动的内容有A.B两份,向左滚动: 3.滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果: 4.在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A.B内容一模一样,这个复原过程很难看出来: 5.循环第3步: 三.代码 1.html部分 <template> <div c

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • Flutter实现牛顿摆动画效果的示例代码

    Flutter实现牛顿摆动画效果的示例代码

    目录 前言 实现步骤 1.绘制静态效果 2.加入动画 两个关键点 完整源码 总结 前言 牛顿摆大家应该都不陌生,也叫碰碰球.永动球(理论情况下),那么今天我们用Flutter实现这么一个理论中的永动球,可以作为加载Loading使用. - 知识点:绘制.动画曲线.多动画状态更新 效果图: 实现步骤 1.绘制静态效果 首先我们需要把线和小圆球绘制出来,对于看过我之前文章的小伙伴来说这个就很简单了,效果图: 关键代码: // 小圆球半径 double radius = 6; /// 小球圆心和直线终

  • JavaScript实现扯网动画效果的示例代码

    JavaScript实现扯网动画效果的示例代码

    目录 演示 技术栈 源码 css控制 js部分 演示 技术栈 JavaScript prototype(原型对象): 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法.Date 对象从 Date.prototype 继承. Array 对象从 Array.prototype 继承. Person 对象从 Person.prototype 继承. 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例. JavaScript 对象

随机推荐