最近在學習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' }})效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
