vue动画之点击按钮往上渐渐显示出来的实例


Posted in Javascript onSeptember 29, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>动画</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 
 <style>
  .box{
   height:500px;
   background-color:black; 
    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>
</head><body>

<!-- 首先将要过渡的元素用transition包裹,并设置过渡的name) -->

 <div id="box">
 <transition name="mybox">
  <div class="box" v-show="boxshow"></div>
 </transition>
 <button @click="togglebox">按钮</button>
</div>
 
 <script>
  new Vue({
  el:'#box',
  data:{
   boxshow:false
  },
  methods:{
   
   togglebox:function(){
    this.boxshow = !this.boxshow;
   }
  }  
 });
  
  
 </script>
</body>
</html>

以上这篇vue动画之点击按钮往上渐渐显示出来的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
浅谈vue项目打包优化策略
Sep 29 #Javascript
vue里input根据value改变背景色的实例
Sep 29 #Javascript
4个顶级开源JavaScript图表库
Sep 29 #Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 #Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 #Javascript
vue根据值给予不同class的实例
Sep 29 #Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
You might like
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Python装饰器用法示例小结
2018/02/11 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
pycharm配置git(图文教程)
2019/08/16 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
新教师工作感言
2014/02/16 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
奥利奥广告词
2014/03/20 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
个人典型事迹材料
2014/12/30 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android