基于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 命名空间以提高代码重用性
Nov 13 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
element-ui 实现响应式导航栏的示例代码
May 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之数组学习
2011/05/29 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
实例解析php的数据类型
2018/10/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
网络教育自我鉴定
2013/11/01 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
红色故事演讲稿
2014/05/22 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python