Vue中多元素過渡特效的解決方案

更新時間：2020年02月05日 15:58:10 作者：小火柴的藍色理想

本文將詳細介紹通過Vue使多元素進行過渡動畫,需要的朋友可以參考下

常見示例

最常見的多標簽過渡是一個列表和描述這個列表為空消息的元素：

<transition>
 <table v-if="items.length > 0">
  <!-- ... -->
 </table>
 <p v-else>Sorry, no items found.</p>
</transition>

下面是一個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="clear">清空數(shù)據(jù)</button> 
 <button @click="reset">重置</button>  
 <transition name="fade">
  <ul v-if="items.length > 0">
   <li v-for="item in items">{{item}}</li>
  </ul>
  <p v-else>Sorry, no items found.</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  items: ['html','css','js']
 },
 methods:{
  clear(){
   this.items.splice(0);
  },
  reset(){
   history.go();
  }
 }
})
</script>

同標簽名稱

如果是相同標簽名的元素切換時，Vue 為了效率只會替換相同標簽內部的內容

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show">Jb51</p>
  <p v-else>JB51</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show:true
 },
})
</script>

由下面的示例可知，兩個相同的p元素切換時，無過渡效果

因此，對于具有相同標簽名的元素切換的情況，需要通過 key 特性設置唯一的值來標記以讓 Vue 區(qū)分它們　

<div id="demo">
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show" key="trueMatch">Jb51</p>
  <p v-else key="falseMatch">JB51</p>
 </transition>
</div>

替代if

在一些場景中，可以給通過給同一個元素的 key 特性設置不同的狀態(tài)來代替 v-if 和 v-else

<transition>
 <button v-if="isEditing" key="save">Save</button>
 <button v-else key="edit">Edit</button>
</transition>

上面的例子可以重寫為

<transition>
 <button v-bind:key="isEditing">
  {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

下面是一個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="isEditing = !isEditing">toggle</button>  
 <transition name="fade">
  <p v-bind:key="isEditing">
   {{ isEditing ? 'Save' : 'Edit' }}
  </p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isEditing:true
 },
})
</script>

使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態(tài)屬性的單個元素過渡

<transition>
 <button v-if="docState === 'saved'" key="saved">Edit</button>
 <button v-if="docState === 'edited'" key="edited">Save</button>
 <button v-if="docState === 'editing'" key="editing">Cancel</button>
</transition>

可以重寫為

<transition>
 <button v-bind:key="docState">{{ buttonMessage }}</button>
</transition>
computed: {
 buttonMessage: function () {
  switch (this.docState) {
   case 'saved': return 'Edit'
   case 'edited': return 'Save'
   case 'editing': return 'Cancel'
  }
 }
}

下面是一個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
 <button @click="change">change</button>  
 <transition name="fade">
  <p v-bind:key="docState">{{ message }}</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  index:0,
  isEditing:true,
  arr:['saved','edited','editing']
 },
 computed: {
  docState(){
   return this.arr[this.index];
  },
  message() {
   switch (this.docState) {
    case 'saved': return 'Edit'
    case 'edited': return 'Save'
    case 'editing': return 'Cancel'
   }
  }
 },
 methods:{
  change(){
   this.index = (++this.index)%3;
  }
 } 
})
</script>

過渡模式

先看下面這個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">  
 <transition name="fade">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

在 “on” 按鈕和 “off” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是 <transition> 的默認行為 - 進入和離開同時發(fā)生

同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了過渡模式

in-out: 新元素先進行過渡，完成之后當前元素過渡離開。

out-in: 當前元素先進行過渡，完成之后新元素過渡進入。

in-out

下面使用in-out來重寫之前的開關按鈕過渡

<div id="demo">  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

out-in

下面使用out-in來重寫之前的開關按鈕過渡

<div id="demo">  
 <transition name="fade" mode="out-in">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

滑動過渡

當元素設置為絕對定位，并互相覆蓋，實現(xiàn)透明度過渡效果

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>
<div id="demo">  
 <transition name="fade" >
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

下面是一個使用absolute和translate實現(xiàn)的類似滑動

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter{transform:translateX(30px);}
.fade-leave-to{transform:translateX(-30px);} 
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>

如果設置in-out模式，將實現(xiàn)更酷的滑動效果

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter{transform:translateX(30px);}
.fade-leave-to{transform:translateX(-30px);} 
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>
<div id="demo">  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

多組件過渡

多個組件的過渡簡單很多，不需要使用 key 特性。相反，只需要使用動態(tài)組件

下面是一個例子

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition: .5s;}
</style>
<div id="example">
 <button @click="change">切換頁面</button>
 <transition name="fade" mode="out-in">
  <component :is="currentView"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#example',
 data:{
  index:0,
  arr:[
   {template:`<div>ComponentA</div>`},
   {template:`<div>ComponentB</div>`},
   {template:`<div>ComponentC</div>`}
  ],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   this.index = (++this.index)%3;
  }
 }
})

更多關于Vue過渡動畫的文章大家可以查看下面的相關鏈接

您可能感興趣的文章:

Vue
過渡

基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)
這篇文章主要介紹了基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
vue3輸入單號和張數(shù)如何自動生成連號的單號
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點擊確定自動生成固定數(shù)量的連號物流單號,本文重點介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧
2024-02-02
Vuex實現(xiàn)計數(shù)器以及列表展示效果
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)計數(shù)器以及列表展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09
Vue3中Pinia的基本使用筆記
Pinia是一個全新的Vue狀態(tài)管理庫,是Vuex的代替者,尤雨溪強勢推薦,下面這篇文章主要給大家介紹了關于Vue3中Pinia的基本使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
Vue中computed和watch的區(qū)別小結
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關數(shù)據(jù)會自動發(fā)生變化,即自動調用相關的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧
2022-12-12
Vue中$once的兩個實用小技巧分享
$once是一個函數(shù),可以為Vue組件實例綁定一個自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關于Vue中$once的兩個實用小技巧,需要的朋友可以參考下
2022-04-04
Vue的H5頁面喚起支付寶支付功能
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下
2019-04-04
Vue3將虛擬節(jié)點渲染到網(wǎng)頁初次渲染詳解
這篇文章主要為大家介紹了Vue3將虛擬節(jié)點渲染到網(wǎng)頁初次渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
Vue自定義樹形控件使用詳解
這篇文章主要為大家詳細介紹了Vue自定義樹形控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08