Vue中多个元素、组件的过渡及列表过渡的方法示例


Posted in Javascript onFebruary 13, 2019

多个元素之间过渡动画效果

多元素之间如何实现过渡动画效果呢?看下面代码

.fade-enter,
.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
  transition: opacity 3s;
}

<div id="root">
  <transition name="fade">
    <div v-if="show">hello world</div>
    <div v-else>bye world</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>

let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    }
  }
})

这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。

如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">bye world</div>

这个时候当div元素进行切换的时候,就不会复用了。

mode

Vue 提供了一mode属性,来实现多个元素切换时的效果

mode取值in-out,动画效果是先出现在隐藏

<div id="root">
  <transition name="fade" mode="in-out">  //第一次点击时,执行顺序为:①②
    <div v-if="show">hello world</div> //再消失 ②
    <div v-else>bye world</div>    //先显示 ①
  </transition>
  <button @click="handleClick">切换</button>  
</div>

mode取值为out-in,动画效果为先隐藏在出现

<div id="root">
  <transition name="fade" mode="out-in">  //第一次点击时,执行顺序为:①②
    <div v-if="show">hello world</div> //先消失 ①
    <div v-else>bye world</div>    //再显示 ②
  </transition>
  <button @click="handleClick">切换</button>  
</div>

多个组件之间过渡动画效果

这里需要借助动态组件来实现多组件之间过渡动画效果

先用普通的方式来实现切换:

.fade-enter,
.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
  transition: opacity 1s;
}

<div id="root">
  <transition name="fade" mode="in-out">
    <child-one v-if="show"></child-one>
    <child-two v-else></child-two>
  </transition>
  <button @click="handleClick">切换</button>
</div>

Vue.component('child-one',{
  template:'<div>child-one</div>'
})
Vue.component('child-two',{
  template:'<div>child-two</div>'
})
let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    }
  }
})

你会发现,这样子实现组件切换,transition动画效果是存在的,但是我们想要用动态组件来实现,该怎么弄呢?

可查看之前的文章:Vue 动态组件与 v-once 指令,这篇文章中详细的介绍了 Vue 的动态组件

列表过渡

这里需要使用一个新标签transition-group来是实现

.fade-enter,
.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
  transition: opacity 1s;
}

<div id="root">
  <transition-group name="fade">
    <div v-for="item of list" :key="item.id">{{item.title}}-----{{item.id}}</div>
  </transition-group>
  <button @click="handleClick">添加</button>
</div>

let vm = new Vue({
  el: '#root',
  data: {
    count:0,
    list:[]
  },
  methods: {
    handleClick() {
      this.list.push({
        id:this.count ++,
        title:'hello world'
      })
    }
  }
})

为什么使用了transition-group标签后,就可以出现过渡动画效果了呢?看下面代码:

<transition-group name="fade">
  <div>hello world</div>
  <div>hello world</div>
  <div>hello world</div>
</transition-group>

在循环过后,页面中会出现一个个div元素,如果你在外面添加一个transition-group的标签,相当于你在每一个div外层都加了一个transition标签,看下面代码

<transition>
  <div>hello world</div>
</transition>
<transition>
  <div>hello world</div>
</transition>
<transition>
  <div>hello world</div>
</transition>

这时候,Vue 把列表的过渡转化为单个的div元素的过渡了,Vue 会在这个元素隐藏或者显示的时候动态的找到时间点,增加对应的class。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
vue写h5页面的方法总结
Feb 12 #Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 #Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 #Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 #Javascript
图文详解vue框架安装步骤
Feb 12 #Javascript
详解vue组件中使用路由方法
Feb 12 #Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 #Javascript
You might like
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
详解如何使用Python编写vim插件
2017/11/28 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
环保建议书400字
2014/05/14 职场文书
信息管理专业自荐书
2014/06/05 职场文书
小石潭记导游词
2015/02/03 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
java基础——多线程
2021/07/03 Java/Android
Ruby处理YAML和json数据
2022/04/18 Ruby