详解Vue中添加过渡效果

本篇文章主要介绍了详解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中添加过渡效果

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwypg.html