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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
理解javascript回调函数
Dec 28 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
html中select语句读取mysql表中内容
2006/10/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php实现登陆模块功能示例
2016/10/20 PHP
js表头排序实现方法
2015/01/16 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
ASP.NET Core中的配置详解
2021/02/05 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
上班打牌检讨书
2014/02/07 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
感恩寄语大全
2014/04/11 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript