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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
初识Laravel
2014/10/30 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实现城市列表选择
2018/06/05 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
详解Python sys.argv使用方法
2019/05/10 Python
.net开发工程师面试题
2014/02/25 面试题
十八届三中全会感言
2014/03/10 职场文书
yy婚礼主持词
2014/03/14 职场文书
导师评语大全
2014/04/26 职场文书
残疾人小组计划书
2014/04/27 职场文书
情况说明书怎么写
2015/10/08 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python