详解Vue中添加过渡效果

最近在学习Vue这个框架，发现新的版本中，官网的文档里面说的过渡效果，如果直接粘贴官方的例子中的代码，发现并没有过渡的效果，经过反复测试之后终于知道怎么搞了，把测试的过程总结一下，以便以后回顾。

贴上成功的代码：

html:

hello
//或者
hello

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'
 }
})

效果如下：

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