基于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进行拖拽
Jul 20 Javascript
Maps Javascript
Jan 22 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
angularJS深拷贝详解
Mar 23 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
微信小程序实现星级评分和展示
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实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
爱游人:Travelliker
2017/09/05 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
考核工作实施方案
2014/03/30 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
为自己工作观后感
2015/06/11 职场文书
回复函格式及范文
2015/07/14 职场文书
安全生产标语口号
2015/12/26 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android