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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
简单的三步vuex入门
May 20 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php中批量替换文件名的实现代码
2011/07/20 PHP
Admin generator, filters and I18n
2011/10/06 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
经济管理毕业生求职信
2014/03/15 职场文书
《赶海》教学反思
2014/04/20 职场文书
诚信考试标语
2014/06/24 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL