vue的過(guò)渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(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ì)頻繁的建立銷毀。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)畫 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！