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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
javascript cookie的简单应用
Feb 24 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
express框架下使用session的方法
Jul 31 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python高级property属性用法实例分析
2019/11/19 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
如何在pycharm中安装第三方包
2020/10/27 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
给朋友的道歉信
2014/01/09 职场文书
5.1手机促销活动
2014/01/17 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
2015最新民情日记范文
2015/06/26 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP
python高温预警数据获取实例
2022/07/23 Python