Vue多元素过渡
Posted 小火柴的蓝色理想
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue多元素过渡相关的知识，希望对你有一定的参考价值。
前面的话
前面分别介绍了单元素过渡的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多元素过渡的主要内容，如果未能解决你的问题，请参考以下文章