Vue列表过渡

最新推荐文章于 2022-08-11 20:50:06 发布
最新推荐文章于 2022-08-11 20:50:06 发布
阅读量114 收藏
点赞数
文章标签： javascript ViewUI

前面的话

　　本文将详细介绍Vue列表过渡

 

概述

　　前面分别介绍了单元素CSS过渡和JS过渡，以及多元素过渡。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件

【<transition-group>】

　　<transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag 特性更换为其他元素。而且其内部元素总是需要提供唯一的 key 属性值

<transition-group name="list" tag="p">
    <!-- ... -->
  </transition-group>

 

普通过渡

　　下面是一个添加和删除列表项的例子

<style>
.list-item {display: inline-block;margin-right: 10px;}
.list-enter-active, .list-leave-active {transition: all 1s;}
.list-enter, .list-leave-to{opacity: 0;transform: translateY(30px);}
</style>
<div id="list-demo" class="demo">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">{{item}}</span>
  </transition-group>
</div>
<script>
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length)
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove() {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})
</script>

 

平滑过渡

　　上面这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡

【v-move】

　　<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置

　　在上面代码中基础上，做出如下改进：

　　1、增加.list-move的样式，使元素在进入时实现过渡效果

　　2、在.list-leave-active中设置绝对定位，使元素在离开时实现过渡效果

<style>
.list-item {display: inline-block;margin-right: 10px;}
.list-move,.list-enter-active, .list-leave-active {transition: 1s;}
.list-leave-active{position:absolute;}
.list-enter, .list-leave-to{opacity: 0;transform: translateY(30px);}
</style>

 

变换过渡

　　下面接着利用move属性，进行变换过渡，即一个列表中的列表项既不增加也不减少，只是不断地变换其位置

<style>
.list-move{transition: transform 1s;}
</style>
<div id="list-demo" class="demo">
  <button @click="shuffle">shuffle</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
</div>
<script>
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
  },
  methods: {
    shuffle(){
      this.items = this.items.sort(()=>{return Math.random() - 0.5;})
    },
  }
})
</script>

　　下面的效果看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置

　　下面将进入离开的例子和这个技术结合， 使列表的一切变动都会有动画过渡

　　[注意]使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

<style>
.list-item {display: inline-block;margin-right: 10px;}
.list-move,.list-enter-active, .list-leave-active {transition: 1s;}
.list-leave-active{position:absolute;}
.list-enter, .list-leave-to{opacity: 0;transform: translateY(30px);}
</style>

　　以上代码中，由于move、enter和leave都需要设置transition。因此，直接在元素上设置transition即可

<style>
.list-item {display: inline-block;margin-right: 10px;transition: 1s;}
.list-leave-active{position:absolute;}
.list-enter, .list-leave-to{opacity: 0;transform: translateY(30px);}
</style>

　　下面是完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list-item {display: inline-block;margin-right: 10px;transition: 1s;}
.list-leave-active{position:absolute;}
.list-enter, .list-leave-to{opacity: 0;transform: translateY(30px);}
</style>
</head>
<body>
<div id="list-demo" class="demo">
  <button @click="shuffle">shuffle</button>
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>  
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">{{item}}</span>
  </transition-group>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script>
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length)
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove() {
      this.items.splice(this.randomIndex(), 1)
    },    
    shuffle(){
      this.items = this.items.sort(()=>{return Math.random() - 0.5;})
    },
  }
})
</script>
</body>
</html>

 

多维列表

　　FLIP 动画不仅可以实现单列过渡，多维网格的过渡也同样简单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {width: 270px;margin-top: 10px;line-height:30px;text-align:center;}
.cell {display: inline-block;width: 30px;height: 30px;outline: 1px solid #aaa;}
.cell-move {transition:1s;}
</style>
</head>
<body>
<div id="list-demo" class="demo">
  <button @click="shuffle">shuffle</button>
  <transition-group name="cell" tag="div" class="container">
    <span v-for="cell in cells" :key="cell.id" class="cell">{{ cell.number }}</span>
  </transition-group>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script>
new Vue({
  el: '#list-demo',
   data: {
      cells: Array.apply(null, { length: 81 })
        .map(function (_, index) { 
          return {
            id: index,
            number: index % 9 + 1
          }
        })
    },
  methods: {
    shuffle(){
      this.cells = this.cells.sort(()=>{return Math.random() - 0.5;})
    },
  }
})
</script>
</body>
</html>

 

渐进过渡

　　通过 data 属性与 JavaScript 通信 ，就可以实现列表的渐进过渡

　　下面是使用CSS过渡实现的一个例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list-move,.list-enter-active, .list-leave-active {transition: 1s;}
.list-leave-active{position:absolute;}
.list-enter,.list-leave-to{opacity: 0;height:0;}
</style>
</head>
<body>
<div id="list-demo" class="demo">
  <input v-model="query">
  <transition-group name="list" tag="ul">
    <li v-for="(item, index) in computedList" :key="item" :data-index="index">{{item}}</li>
  </transition-group>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script>
new Vue({
  el: '#list-demo',
  data: {
    query: '',
    list: ['HTML','CSS','Javascript','jQuery','Vue']
  },
  computed: {
    computedList() {
      return this.list.filter((item)=>{
        return item.toLowerCase().indexOf(this.query.toLowerCase()) !== -1
      })
    }
  },  
})
</script>
</body>
</html>

　　上面的效果中，列表项是一齐运动的。如果要实现依次运动的效果，则需要使用JS过渡来实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="list-demo" class="demo">
  <input v-model="query">
  <transition-group name="list" tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <li v-for="(item, index) in computedList" :key="item" :data-index="index">{{item}}</li>
  </transition-group>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/velocity.min.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/vue.js"></script>
<script>
new Vue({
  el: '#list-demo',
  data: {
    query: '',
    list: ['HTML','CSS','Javascript','jQuery','Vue']
  },
  computed: {
    computedList() {
      return this.list.filter((item)=>{
        return item.toLowerCase().indexOf(this.query.toLowerCase()) !== -1
      })
    }
  },  
  methods: {
    beforeEnter(el) {
      el.style.opacity = el.style.height = 0
    },
    enter(el, done) {
      setTimeout(()=>{
        Velocity(el,{ opacity: 1, height: '1.6em' },{ complete: done })
      }, el.dataset.index * 150)
    },
    leave(el, done) {
      setTimeout(()=>{
        Velocity(el,{ opacity: 0, height: 0 },{ complete: done })
      }, el.dataset.index * 150)
    }
  },  
})
</script>
</body>
</html>

 

weixin_33727510
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的列表交错过渡实现代码示例
10-17
主要介绍了vue的列表交错过渡实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现列表滚动的过渡动画
11-20
本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下 效果图 失帧比较严重，在手机上效果更佳。 原理分析 这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的...
使用flip技术实现一个上下/左右更换位置的utils，并且封装为一个vue3组件
chendf__的博客
08-11 421
使用flip技术实现一个上下/左右更换位置的utils，并且封装为一个vue3组件
前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战
高先生的猫
07-10 673
前言 在vue的官网中的过渡动画章节中，可以看到一个很酷炫的动画效果 乍一看，让我们手写出这个逻辑应该是非常复杂的，先看看本文最后要实现的效果吧，和这个案例是非常类似的。 预览 分析需求 拿到了这个需求，第一直觉是怎么做？假设第一行第一个图片移动到了第二行第三列，是不是要计算出第一行的高度，再计算出第二行前两个元素的宽度，然后从初始的坐标点通过css或者一些动画 API 移动过去？这样做是可以，但是在图片不定高不定宽，并且一次要移动很多图片情况下，这个计算方法就非常复杂...
Vue FLIP简单实现及理解
weixin_41806000的博客
03-08 1437
//HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="list-complete-demo" class="demo"> <button v-on:click="shuffle">...
Vue相关(过渡动画)
weixin_34249678的博客
09-06 134
Vue 过渡 && 动画 一、CSS过渡 1.transition标签可以用来封装需要过渡的元素，添加entering/leaving 过渡， 条件是： （1）使用条件渲染语句 v-if/v-show （2）动态组件 （3）组件根节点 　　通过style标签设置过渡动画时需要为transition指定name属性，当指定了name属性之后， vue会自动去找几个过渡动画需要的类 a...
vue中使用viewerjs
weixin_34290352的博客
10-03 648
项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue index.vue代码: <template> <div id="index"> &l...
Vue 列表上下过渡效果的实例代码
12-09
最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？ 试了试 Vue 的 transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。 最终效果 某列的...
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
Vue - 过渡 列表过渡
weixin_30462049的博客
06-14 445
列表的进入/离开过渡 获取不大于数组长度的随机数，作为插入新值的位置 <div id="app" class="demo"> <button @click="add">Add</button> <button @click="remove">Remove</button> <br> <br...
Vue 教程（17）—— 进入、离开与列表过渡动画
读万卷书，行万里路
06-25 5126
1 概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 2 单元素/组件的过渡 Vue...
vue 翻页组件vue-flip-page
Harrietjia的博客
02-04 8048
方法 change （改变页面） tap （点击） turning （正在翻页） prev （前一页） next （后一页） 翻到指定页面： handleSwitchManual(index) { if (index === this.currentIndex) return; this.$refs["turn"].toPage(index); t...
Vue API 4 (过渡和动画）
weixin_30388677的博客
08-28 174
transition name 用于自动生成 CSS 过渡类名。例如：name: fade 将自动拓展为 .fade-enter ，.fade-enter-active等。默认类名为 "v" appear ，是否在初始渲染时使用过渡。默认为 false。 css ，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的...
vue 获取元素在浏览器的位置_前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战...
weixin_39847945的博客
12-23 211
前言在 Vue 的官网中的过渡动画章节中，可以看到一个很酷炫的动画效果乍一看，让我们手写出这个逻辑应该是非常复杂的。但是文档里我们发现一个名词：FLIP，这给了我们一个线索，是不是用这个玩意就可以写出这个动画呢？答案是肯定的，顺着这个线索找到 Aerotwist 社区里的一篇文章：flip-your-animations，以这篇文章为切入点，一步步来实现一个类似的效果。图片素材依然引用自知乎问题《...
vue中列表的重新排列后添加过渡效果
weixin_46545863的博客
07-08 268
vue中列表的重新排列后添加过渡效果
列表排序应用FLIP动画（vue）
鱼猫的博客
04-15 1155
效果 原理详解 链接 1.beforeUpdate 获取first 变化前位置 (以id建立map映射)， 2.updated 获取变化后位置 last , 3.禁用transition并transform元素回初始位置， 4.异步恢复transition 并取消 transform 代码 <template> <div ref="container"> <div style="display: flex"> <div style="w
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 6852
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
vue中过渡和动画
weixin_34357887的博客
09-11 212
进入/离开 & 列表过渡 概述 Vue在插入、更新或移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具： 在CSS过渡和动画中自动应用class；配合使用第三方CSS动画库，如Animate.css；在过渡钩子函数中使用JavaScript直接操作DOM；配合使用第三方JavaScript动画库，如Velocity.js 在这里，我们只会...
vue循环实现锚点点击并平滑过渡
qq_45067263的博客
06-01 763
项目场景： pc端项目左侧为类别悬浮，点击右侧中心内容平滑过度到锚点点击位置 问题描述： 主要在于不是css实现，css实现很多，但是是vue循环出的，添加各个对应的类名也不同 解决方案： 循环给每一个添加点击事件并传入id名称加动态index拼接 <div :class="isname==index?'l-yellow':''" @click="upmaod(index)" v-for="(item,index) in shoplist" :key="index"> <a hre
vue2过渡vue3
最新发布
08-29
Vue2和Vue3之间的过渡主要包括以下几个方面： 1. 组件的引入：在Vue2中，使用Vue.extend()来创建全局组件，而在Vue3中，使用createApp().component()来创建全局组件。这个变化主要是由于Vue3引入了基于函数的组件 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值