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


Posted in Javascript onSeptember 25, 2020

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

Javascript 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 #Javascript
在webstorm中配置less的方法详解
Sep 25 #Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 #Javascript
Javascript confirm多种使用方法解析
Sep 25 #Javascript
OpenLayers3实现地图显示功能
Sep 25 #Javascript
openlayers实现图标拖动获取坐标
Sep 25 #Javascript
openlayers实现地图弹窗
Sep 25 #Javascript
You might like
php md5下16位和32位的实现代码
2008/04/09 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
自荐信封面
2013/12/04 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
庆祝国庆节标语
2014/10/09 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
工程部主管岗位职责
2015/02/12 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年团支部工作总结
2015/04/03 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android