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中OnLoad几种使用方法
Dec 15 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
JS实现商品筛选功能
Aug 19 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
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
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
int在python中的含义以及用法
2019/06/27 Python
在django模板中实现超链接配置
2019/08/21 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python中的unittest框架实例详解
2021/02/05 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
个人自查自纠材料
2014/10/14 职场文书
个人总结与自我评价
2015/02/14 职场文书
入党申请书怎么写?
2019/06/21 职场文书