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