详解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
过渡

vue中modal传输数据并刷新部分页面数据方式
这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue中如何使用Map键值对传参详析
最近在做一个vue的项目,碰到一点关于Map键值对传参的问题,下面这篇文章主要给大家介绍了关于Vue中如何使用Map键值对传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue3.3 + TS4构建实现ElementPlus功能的组件库示例
Vue.js 是目前最盛行的前端框架之一,而 TypeScript 则是一种静态类型言语,它能够让开发人员在编写代码时愈加平安和高效,本文将引见如何运用 Vue.js 3.3 和 TypeScript 4 构建一个自主打造媲美 ElementPlus 的组件库
2023-10-10
Vue3跨域解决方案实例详解
这篇文章主要介绍了Vue3跨域解决方案详解,需要的朋友可以参考下
2023-01-01
解决Vue input输入框卡死的问题
这篇文章主要介绍了解决Vue input输入框卡死的问题,文中同时给大家提到了Vue-element中el-input输入卡顿问题及解决方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
vue.js diff算法原理详细解析
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom
2022-06-06
vue事件监听函数on中的this指针域使用
这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue实现搜索和新闻列表功能简单范例
本文通过实例代码给大家介绍了Vue实现搜索和新闻列表功能简单范例，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2018-03-03
vue3中setup声明变量的方式汇总
本文给大家介绍Vue3中setup()函数中声明变量的几种方法,希望本文能够帮助你更好地理解Vue3的开发方式,感兴趣的朋友跟随小编一起看看吧
2023-11-11
element table多层嵌套显示的实践
本文主要介绍了element table多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09