详解Vue中添加过渡效果
更新时间：2017年03月20日 14:22:26 作者：kevin.l
本篇文章主要介绍了详解Vue中添加过渡效果 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近在学习Vue这个框架，发现新的版本中，官网的文档里面说的过渡效果，如果直接粘贴官方的例子中的代码，发现并没有过渡的效果，经过反复测试之后终于知道怎么搞了，把测试的过程总结一下，以便以后回顾。
贴上成功的代码：
html:
<div v-if="show" :transition="expand">hello</div> //或者 <div v-if="show" v-bind:transition="expand">hello</div>
css:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
js:
new Vue({
el: '#app',
data: {
show: false,
transitionName: 'expand'
}
})
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
树形下拉框是一个带有下列树形结构的下拉框,本文主要介绍了Vue Treeselect树形下拉框的使用小结,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
Vue import from省略后缀/加载文件夹的方法/实例详解
本文介绍Vue在import时省略后缀以及import文件夹的方法，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
vue translate peoject实现在线翻译功能【新手必看】
这篇文章主要介绍了vue translate peoject实现在线翻译功能，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue使用element ui自定义手机验证规则问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
vue表单验证rules及validator验证器的使用方法实例
在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率2024-09-09
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,本文主要介绍了element表格el-table实现虚拟滚动解决卡顿问题,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了如何基于Vue2实现歌曲播放和歌词滚动效果,文中通过代码示例和图文讲解的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手试一下2024-09-09
最新评论