kevin.l通过本文主要向大家介绍了vue详解,vue 指令详解,vue.js详解,vue.js路由详解,vue过渡效果等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近在学习Vue这个框架，发现新的版本中，官网的文档里面说的过渡效果，如果直接粘贴官方的例子中的代码，发现并没有过渡的效果，经过反复测试之后终于知道怎么搞了，把测试的过程总结一下，以便以后回顾。
贴上成功的代码：
html:
<div v-if="show" :transition="expand">hello</div> //或者 <div v-if="show" v-bind:transition="expand">hello</div></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;
}
</div>
js:
new Vue({
el: '#app',
data: {
show: false,
transitionName: 'expand'
}
})
</div>
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
</div>