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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
js 浏览器事件介绍
Mar 30 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
php strrpos()与strripos()函数
2013/08/31 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
解决python运行效率不高的问题
2020/07/20 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
七匹狼男装广告词
2014/03/21 职场文书
环保建议书600字
2014/05/14 职场文书
财务会计专业自荐书
2014/06/30 职场文书
世界读书日的活动方案
2014/08/20 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
个人承诺书格式范文
2015/04/29 职场文书
趣味运动会口号
2015/12/24 职场文书
外出考察学习心得体会
2016/01/18 职场文书
幼儿园教学反思范文
2016/03/02 职场文书