基于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动画效果类封装代码
Aug 28 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
JS类的封装及实现代码
Dec 02 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
基于AngularJS的简单使用详解
Sep 10 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 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递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
RequireJs的使用详解
2017/02/19 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
js中url对象化管理分析
2017/12/29 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python制作词云图代码实例
2019/09/09 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
python os.listdir()乱码解决方案
2021/01/31 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
程序员机试试题汇总
2012/03/07 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
护士自荐信范文
2013/12/15 职场文书
设备管理实施方案
2014/05/31 职场文书
党委班子对照检查材料
2014/08/19 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
晚会开幕词
2015/01/28 职场文书
财务人员入职担保书
2015/09/22 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers