詳解Vue中添加過(guò)渡效果
更新時(shí)間：2017年03月20日 14:22:26 作者：kevin.l
本篇文章主要介紹了詳解Vue中添加過(guò)渡效果 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
最近在學(xué)習(xí)Vue這個(gè)框架，發(fā)現(xiàn)新的版本中，官網(wǎng)的文檔里面說(shuō)的過(guò)渡效果，如果直接粘貼官方的例子中的代碼，發(fā)現(xiàn)并沒(méi)有過(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)入的開(kāi)始狀態(tài) */
/* .expand-leave 定義離開(kāi)的結(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 Treeselect樹(shù)形下拉框的使用小結(jié)
樹(shù)形下拉框是一個(gè)帶有下列樹(shù)形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹(shù)形下拉框的使用小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Vue?import?from省略后綴/加載文件夾的方法/實(shí)例詳解
本文介紹Vue在import時(shí)省略后綴以及import文件夾的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開(kāi)發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
介紹了如何在Vue項(xiàng)目中使用Axios封裝請(qǐng)求、配置攔截器,并在api.js中統(tǒng)一管理API接口,同時(shí),也講解了如何在vite.config.js中配置解決跨域問(wèn)題,這些操作可以優(yōu)化前端代碼結(jié)構(gòu),提高開(kāi)發(fā)效率2024-09-09
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問(wèn)題
當(dāng)頁(yè)面數(shù)據(jù)過(guò)多,前端渲染大量的DOM時(shí),會(huì)造成頁(yè)面卡死問(wèn)題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問(wèn)題,具有一定的參考價(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