Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)
vue的過(guò)渡動(dòng)畫(huà)，主要是transition標(biāo)簽的使用，配合css動(dòng)畫(huà)實(shí)現(xiàn)的。官方文檔css過(guò)渡
通過(guò)點(diǎn)擊事件來(lái)切換show的值來(lái)改變顯示的文本，下面的css通過(guò)進(jìn)入離開(kāi)時(shí)的在勻速狀態(tài)下xxs（秒）下來(lái)轉(zhuǎn)換在x軸上位移的距離， transition包括的是位移的內(nèi)。key是必須有的，用來(lái)標(biāo)記位移的哪一個(gè)，這個(gè)方法有一點(diǎn)，用v-if時(shí)會(huì)頻繁的建立銷(xiāo)毀。name是你定義的名字必須有，和css里面的名字是保持一致的，你可以自定義名字。
使用它時(shí)有時(shí)候切換的并不是標(biāo)簽，而是一個(gè)組件，這時(shí)候應(yīng)該使用transition-group來(lái)包括。
<template>
<div>
<div>
<span @click="show = 0">第一個(gè)</span>
<span @click="show = 2">第二個(gè)</span>
<span @click="show = 3">第三個(gè)</span>
</div>
<transition-group name="slide">
<div v-show="show == 0" key="0">第一個(gè)文本</div>
<div v-show="show == 2" key="2">第二個(gè)文本</div>
<div v-show="show == 3" key="3">第三個(gè)文本</div>
</transition-group>
</div>
</template>
<script>
export default {
data () {
return {
show:0
}
}
}
</script>
<style>
.slide-enter-active{
transition:all .5s linear;
}
.slide-leave-active{
transition:all .1s linear;
}
.slide-enter{
transform: translateX(-100%);
opacity: 0;
}
.slide-leave-to{
transform: translateX(110%);
opacity: 0;
}
</style>
總結(jié)
以上所述是小編給大家介紹的Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- Vue入門(mén)之a(chǎn)nimate過(guò)渡動(dòng)畫(huà)效果
- vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫(huà)
- 使用vue-router切換頁(yè)面時(shí)實(shí)現(xiàn)設(shè)置過(guò)渡動(dòng)畫(huà)
- vue中組件的過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)代碼
- Vue 解決路由過(guò)渡動(dòng)畫(huà)抖動(dòng)問(wèn)題(實(shí)例詳解)
- Vue動(dòng)畫(huà)事件詳解及過(guò)渡動(dòng)畫(huà)實(shí)例
- 簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)
- 解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題
- Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)原理解析
- Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果實(shí)例詳解
相關(guān)文章
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過(guò)調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競(jìng)態(tài)問(wèn)題，感興趣的可以了解一下2022-04-04
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue js生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue2實(shí)現(xiàn)子組件修改父組件值的方法小結(jié)
在 Vue 2 中,子組件不能直接修改父組件的值,因?yàn)?nbsp;Vue 遵循單向數(shù)據(jù)流的原則,為了實(shí)現(xiàn)子組件修改父組件的數(shù)據(jù),本文給大家介紹了Vue2實(shí)現(xiàn)子組件修改父組件值的四種方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-03-03
前端vue面試總問(wèn)watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過(guò)程中基本必問(wèn)的技術(shù)棧,其中Vue響應(yīng)式話(huà)題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽(tīng)數(shù)據(jù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過(guò)程中的建議2023-10-10
Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來(lái)實(shí)現(xiàn)的，通過(guò)Object.defineProperty對(duì)數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
uni-file-picker搭配uni.uploadFile在使用問(wèn)題上踩了不少坑,我至今還是沒(méi)辦法在不改uniapp源碼基礎(chǔ)上實(shí)現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧2024-01-01
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問(wèn)題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實(shí)例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問(wèn)題以及解決辦法,需要的朋友可以參考下2022-08-08