Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫

更新時(shí)間：2019年05月06日 16:15:20 作者：木子沐沐

vue的過渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。接下來通過本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫效果，感興趣的朋友一起看看吧

vue的過渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。官方文檔css過渡

通過點(diǎn)擊事件來切換show的值來改變顯示的文本，下面的css通過進(jìn)入離開時(shí)的在勻速狀態(tài)下xxs（秒）下來轉(zhuǎn)換在x軸上位移的距離， transition包括的是位移的內(nèi)。key是必須有的，用來標(biāo)記位移的哪一個(gè)，這個(gè)方法有一點(diǎn)，用v-if時(shí)會(huì)頻繁的建立銷毀。name是你定義的名字必須有，和css里面的名字是保持一致的，你可以自定義名字。

使用它時(shí)有時(shí)候切換的并不是標(biāo)簽，而是一個(gè)組件，這時(shí)候應(yīng)該使用transition-group來包括。

<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)過渡動(dòng)畫，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(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í)行時(shí)機(jī)，還可以解決競(jìng)態(tài)問題，感興趣的可以了解一下
2022-04-04
Vue編譯器optimize源碼分析
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue js 的生命周期（看了就懂）(推薦)
這篇文章主要介紹了Vue js生命周期，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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ù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議
2023-10-10
Vue引用Swiper4插件無法重寫分頁器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue2.x雙向數(shù)據(jù)綁定原理解析
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來實(shí)現(xiàn)的，通過Object.defineProperty對(duì)數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下
2023-02-02
vue3+uniapp 上傳附件的操作代碼
uni-file-picker搭配uni.uploadFile在使用問題上踩了不少坑,我至今還是沒辦法在不改uniapp源碼基礎(chǔ)上實(shí)現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧
2024-01-01
vuex安裝失敗解決的方法實(shí)例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實(shí)例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問題以及解決辦法,需要的朋友可以參考下
2022-08-08