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

更新时间：2018年09月29日 12:00:39 作者：小仙女de成长

今天小编就为大家分享一篇vue动画之点击按钮往上渐渐显示出来的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<!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动画之点击按钮往上渐渐显示出来的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 使用postMessage 实现父子跨域通信
这篇文章主要介绍了Vue应用 postMessage 实现父子跨域通信,通过示例介绍了postMessage的使用，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-12-12
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下
2023-11-11
Vue组件二次封装的一些实用技巧总结
我们在做项目经常会遇到组件功能不能满足业务需求的时候,这时候需要在原有的组件上进行二次封装,下面这篇文章主要给大家介绍了关于Vue组件二次封装的一些实用技巧,需要的朋友可以参考下
2022-04-04
深入理解vue路由的使用
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
2017-03-03
Vue echarts模拟后端数据流程详解
在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法
2022-09-09
如何在vue中使用ant-design-vue组件
这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
在使用vuex的时候出现commit未定义错误的解决
这篇文章主要介绍了在使用vuex的时候出现commit未定义错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue遍历生成的输入框绑定及修改值示例
今天小编就为大家分享一篇vue遍历生成的输入框绑定及修改值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
$vue无法加载文件C:\xx\AppData\Roaming\npm\vue.ps1系统禁止运行脚本$
vue无法加载文件C:\xx\AppData\Roaming\npm\vue.ps1系统禁止运行脚本
这篇文章主要介绍了vue : 无法加载文件 C:\xx\AppData\Roaming\npm\vue.ps1...系统上禁止运行脚本问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07