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数组处理多个字符串的连接问题
Aug 20 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
javascript中this指向详解
Apr 23 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
js实现头像上传并且可预览提交
Dec 25 Javascript
JS实现数组去重的11种方法总结
Apr 04 Javascript
浅谈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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php实现读取超大文件的方法
2014/07/28 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
Javascript 实用小技巧
2010/04/07 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python实现移位加密和解密
2019/03/22 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python内置异常类型全面汇总
2020/05/28 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
白酒市场营销方案
2014/02/25 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
资产运营委托书范本
2014/10/16 职场文书
推广普通话主题班会
2015/08/17 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers