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 相关文章推荐
javascript获取web应用根目录的方法
Feb 12 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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 mail to 配置详解
2014/01/16 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
js简单抽奖代码
2015/01/16 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
js代码实现轮播图
2020/05/04 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python制作动态字符图的实例
2019/01/27 Python
Python字符串的一些操作方法总结
2019/06/10 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python调用接口的4种方式代码实例
2019/11/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
关键字final的用法
2013/10/02 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
高中军训感言1000字
2014/03/01 职场文书
中文专业自荐书
2014/06/29 职场文书
诚信承诺书
2015/01/19 职场文书
会议通知
2015/04/15 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书