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的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
星际RPG字典
2020/03/04 星际争霸
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php flv视频时间获取函数
2010/06/29 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
用js实现in_array的方法
2013/11/05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python实现决策树分类算法
2017/12/21 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Django分组聚合查询实例分享
2020/04/29 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
项目专员岗位职责
2013/12/04 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
环卫工作个人总结
2015/03/04 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书