Vue学习笔记进阶篇之多元素及多组件过渡


Posted in Javascript onJuly 19, 2017

本文介绍了vue 多元素及多组件过渡,这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

多元素的过渡

对于原生标签可以使用 v-if/v-else.但是有一点需要注意:

当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

示例:

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

在一些场景中,也可以给通过给同一个元素的 key特性设置不同的状态来代替v-if和 v-else,上面的例子可以重写为:

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

使用多个 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'
  }
 }
}

过渡模式

在元素之间的过渡中,还存在一个问题:两个元素都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 <transition>的默认行为 - 进入和离开同时发生。

有一种最原始的解决方法就是,在元素绝对定位在彼此之上的时候运行正常。

还有一种方法就是使用Vue 提供的过渡模式.

  1. in-out: 新元素先进行过渡,完成之后当前元素过渡离开。
  2. out-in: 当前元素先进行过渡,完成之后新元素过渡进入。

用 out-in重写之前的开关按钮过渡:

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

多元素过渡的例子

v-if和v-else的绝对定位实例

<div class="my-div" id="app">
  <transition name="fade">
    <button class="btn" :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button>
    <!--<button key="on" v-if="show" class="btn" @click="show = !show">on</button>-->
    <!--<button key="off" v-else class="btn" @click="show = !show">off</button>-->
  </transition>
</div>
.my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
new Vue({
  el:'#app',
  data:{
    show : true
  }
})

多个v-if的例子

<div class="my-div" id="app">
  <transition name="fade">
    <button class="btn" :key="key" >{{btnContent}}</button>
  </transition>
</div>
.my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
var app = new Vue({
  el:'#app',
  data:{
    key:'add'
  },
  computed:{
    btnContent:function () {
      switch (this.key){
        case 'add' : return 'Add'
        case 'edit' : return 'Edit'
        case 'delete' : return 'Delete'
      }
    }
  }
})

这里我没有做对app.key的值的控制,所以想看过渡效果的话,可以在控制台里修改app.key的值。

过渡模式的例子

<div id="app">
  <transition name="fade" mode="out-in">
    <button :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button>
  </transition>
</div>
.fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
new Vue({
  el:'#app',
  data:{
    show : true
  }
})

多组件过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件,情况一下例子:

<div id="app">
  <transition name="fade" mode="out-in">
    <component :is="view"></component>
  </transition>
</div>
.fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
var app = new Vue({
  el:'#app',
  data:{
    view:'v-a'
  },
  components:{
    'v-a':{
      template:'<div> component a </div>'
    },
    'v-b':{
      template:'<div> component b </div>'
    },
  }
})

在控制台中修改app.view的值便可看到过渡效果。

以上示例中的过渡动画,都可以自己定义,也可以使用上一节提到的自定义class已经钩子函数等,在这里就不做详细介绍了。

感谢阅读,希望能帮助到大家,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
vue无限轮播插件代码实例
May 10 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 #Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 #Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 #Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 #Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
You might like
php分页函数示例代码分享
2014/02/24 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python CSV模块使用实例
2015/04/09 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python super的使用方法及实例详解
2019/09/25 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
从python读取sql的实例方法
2020/07/21 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
大专生自我评价
2014/01/28 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2019入党申请书格式
2019/06/25 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
python 爬取豆瓣网页的示例
2021/04/13 Python
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL