基于vue展开收起动画的示例代码


Posted in Javascript onJuly 05, 2018

之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网 的过渡&动画,发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果)

1、实际效果

基于vue展开收起动画的示例代码

2、代码

<!--css-->
.box{
  height:200px;width: 200px;
  background-color:black;
}
.draw-enter-active, .draw-leave-active {
  transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}

<div id="app">
  <button @click="boxshow = !boxshow">点击展开/关闭</button>
  <transition name="draw">  <!--这里的name 和 css 类名第一个字段要一样-->
    <div class="box" v-show="boxshow"></div>
  </transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      boxshow:false
    },
  });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
javascript版2048小游戏
Mar 18 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
You might like
php中的时间显示
2007/01/18 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
js类型检查实现代码
2010/10/29 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python制作抖音代码舞
2019/04/07 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
党员个人承诺书
2015/04/27 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Python一行代码实现自动发邮件功能
2021/05/30 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript