最近在学习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 { height: 0; padding: 0 10px; opacity: 0;}

js:

new Vue({ el: '#app', data: { show: false, transitionName: 'expand' }})

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。