詳解Vue中添加過渡效果
最近在學(xué)習(xí)Vue這個框架,發(fā)現(xiàn)新的版本中,官網(wǎng)的文檔里面說的過渡效果,如果直接粘貼官方的例子中的代碼,發(fā)現(xiàn)并沒有過渡的效果,經(jīng)過反復(fù)測試之后終于知道怎么搞了,把測試的過程總結(jié)一下,以便以后回顧。
貼上成功的代碼:
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 定義進(jìn)入的開始狀態(tài) */ /* .expand-leave 定義離開的結(jié)束狀態(tài) */ .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; }
js:
new Vue({ el: '#app', data: { show: false, transitionName: 'expand' } })
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?import?from省略后綴/加載文件夾的方法/實(shí)例詳解
本文介紹Vue在import時省略后綴以及import文件夾的方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07element表格el-table實(shí)現(xiàn)虛擬滾動解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動效果
這篇文章主要介紹了如何基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動效果,文中通過代碼示例和圖文講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手試一下2024-09-09