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 相关文章推荐
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 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
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
Angular工具方法学习
2016/12/26 Javascript
javascript表单正则应用
2017/02/04 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python算术运算符实例详解
2017/05/31 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Django进阶之CSRF的解决
2018/08/01 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
企业军训感想
2014/02/07 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《童年》教学反思
2014/02/18 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
班主任工作总结范文
2015/08/13 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
python游戏开发Pygame框架
2022/04/22 Python