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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
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
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python下的twisted框架入门指引
2015/04/15 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python 调试冷知识(小结)
2019/11/11 Python
python 实现按对象传值
2019/12/26 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
商务英语毕业生自荐信范文
2013/11/08 职场文书
营业经理岗位职责
2013/11/10 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
白银帝国观后感
2015/06/17 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python