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