Vue中多元素过渡特效的解决方案


Posted in Javascript onFebruary 05, 2020

常见示例

最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:

<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">Jb51</p>
  <p v-else>JB51</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">Jb51</p>
  <p v-else key="falseMatch">JB51</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;
  }
 }
})

更多关于Vue过渡动画的文章大家可以查看下面的相关链接

Javascript 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 #Javascript
Vue的状态管理vuex使用方法详解
Feb 05 #Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 #Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 #Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 #Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 #Javascript
vue使用原生swiper代码实例
Feb 05 #Javascript
You might like
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python for i in range ()用法详解
2020/09/18 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
2015欢度元旦标语口号
2014/12/09 职场文书
财务工作失误检讨书
2015/02/19 职场文书
赞助商致辞
2015/07/30 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书