最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾。
贴上成功的代码:
html:
rush:xhtml;">
//或者
css:
rush: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:
rush:js;">
new Vue({
el: '#app',data: {
show: false,transitionName: 'expand'
}
})
效果如下: