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 {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

js:

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

效果如下：

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue中如何添加过渡效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!