Vue多元素過渡
阿新 • • 發佈：2017-08-22
runjs 透明度 amp cat catalog ebo 單元 詳細 cit
前面的話
前面分別介紹了單元素過渡的CSS過渡和JS過渡，本文將詳細介紹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">清空數據</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">我是小火柴</p> <p v-else>我不是小火柴</p> </transition> </div>
<script> new Vue({ el: ‘#demo‘, data: { show:true }, }) </script>
由下面的示例可知，兩個相同的p元素切換時，無過渡效果
因此，對於具有相同標簽名的元素切換的情況，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們
<div id="demo"> <button @click="show = !show">toggle</button> <transition name="fade"> <p v-if="show" key="trueMatch">我是小火柴</p> <p v-else key="falseMatch">我不是小火柴</p> </transition> </div>
替代if
在一些場景中，可以給通過給同一個元素的 key 特性設置不同的狀態來代替 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 的多個元素的過渡可以重寫為綁定了動態屬性的單個元素過渡
<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> 的默認行為 - 進入和離開同時發生
同時生效的進入和離開的過渡不能滿足所有要求，所以 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>
滑動過渡
當元素設置為絕對定位，並互相覆蓋，實現透明度過渡效果
<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實現的類似滑動
<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模式，將實現更酷的滑動效果
<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 特性。相反，只需要使用動態組件
下面是一個例子
<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; } } }) </script>
Vue多元素過渡