vue的列表交错过渡实现代码示例

交错过渡效果

花里胡哨,华而不...真香

基于vue的,需要你对 vue 的 transition 和 transition-group有过使用和了解。

transition

vue的文档对 transtion 组件已经有了很详细的 分析了。

这里说一下我的理解:

transtion 是vue提供的一个抽象组件,会在 合适的时机 帮我们操作其包裹的子元素。

这个合适的时机是:

  1. beforeEnter dom 从 js 生成,并刚插入页面的 那一帧(对应下图的动画开始)
  2. enter dom 插入页面之后的 下一帧(对应下图的动画中)
  3. afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)

transition-group

ransition-group组件 会对包裹的列表中每一个元素批量进行 transtion组件 的操作。

html

<div id="app" @click="num === 0 ? num++ : num = 5">
  <transition-group name="list">
    <item v-for="n in num" :key=n />
  </transition-group>
</div>

css

.list-enter {
  opacity: 0;
  transform: translateY(100%);
}
.list-enter-active {
  transition: .3s;
}
/* enter-to其实可以不用写, 没有显性写明,就是默认的opacity: 1;transform: none; */
.list-enter-to {
  opacity: 1;
  transform: translateY(0);
}

接下来给 每个列表项 加上不同 延时 即可。

transition-delay

css

.list-enter-active:nth-child(5n+2) {
  transition-delay: .3s;
}
.list-enter-active:nth-child(5n+3) {
  transition-delay: .5s;
}
.list-enter-active:nth-child(5n+4) {
  transition-delay: .7s;
}
.list-enter-active:nth-child(5n+5) {
  transition-delay: .9s;
}

用 transition-delay 配合 css选择器,确实可以实现交错过渡,

但是缺点也很明显,要写大量的 css ,修改起来也不灵活。

接下来我们用vue的 JavaScript钩子 来实现。

setTimeout

html

<div id="app" @click="num === 0 ? num++ : num = 5">
  <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测,让我们更好控制 动画完成的时机 -->
  <transition-group
    v-bind:css="false"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter">

    <item v-for="(n,index) in num" :key=n :data-delay=index*100 />

  </transition-group>
</div>

当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

new Vue({
  el: "#app",
  data: () => ({
    num: 0
  }),
  methods: {
    //让我们在 beforeEnter enter afterEnter 钩子里,把 vue 帮我们做的事,自己做一遍:
    //添加移除 class 类名,监听 transitionend 事件。
    beforeEnter(dom) {
      dom.classList.add('list-enter', 'list-enter-active');
    },
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.classList.remove('list-enter');
        dom.classList.add('list-enter-to');
        //监听 transitionend 事件
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
         dom.removeEventListener(transitionend, onEnd);
         done(); //调用done() 告诉vue动画已完成,以触发 afterEnter 钩子
        });
      }, delay)
    },
    afterEnter(dom) {
      dom.classList.remove('list-enter-to', 'list-enter-active');
    }
  }
})

目前来说,运行良好,实现了交错过渡的效果,也不用写大量的 css。

回头看看我们一共做了2件事,用 .list-enter .list-enter-to 和 setTimeout

告诉浏览器,在不同的时间把列表项,从opacity 0 translateY(100%) 过渡到,opacity 1 translateY(0)。

告诉浏览器元素的不同状态,除了类名之外,

我们可以直接操作dom,把样式写到内联,

除了完全不用写css类名之外,

还可以有更多的编程性。

style

html

<div id="app" @click="num ? num++ : num=5">
    <transition-group
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">

      <item v-for="(n,index) in num"
        :key=n
        :data-delay=index*100
        data-y="100%"
        />

    </transition-group>
  </div>
new Vue({
  el: "#app",
  data: () => ({
    num: 0
  }),
  methods: {
    beforeEnter(dom) {
      let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset;
      dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
    },
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.style.cssText = `transition: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;
        //监听 transitionend 事件
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
         dom.removeEventListener(transitionend, onEnd);
         done(); //调用done() 告诉vue动画已完成,以触发 afterEnter 钩子
        });
      }, delay)
    },
    afterEnter(dom) {
      dom.style.cssText = "";
    }
  }
})

嗯 不错,不过既然都上 js 了,能限制的就只有你的想象力了。

html

  <item v-for="(n,index) in num"
    :key=n
    :data-delay=index*100
    :data-x="index%2 === 0 ? '-50%' : '50%'"
    :data-y="getRandom()+'%'"
    :data-s="Math.random()"
  />
getRandom() {
  var rate = Math.floor(Math.random() * 90 + 10);
  return Math.random() > 0.5 ? rate : -1 * rate;
}

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

(0)

相关推荐

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

    多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .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">hell

  • 详解Vue学习笔记进阶篇之列表过渡及其他

    本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag 特性更换为其他元素. 内部元素 总是需要 提供唯一的

  • vue的列表交错过渡实现代码示例

    交错过渡效果 花里胡哨,华而不...真香 基于vue的,需要你对 vue 的 transition 和 transition-group有过使用和了解. transition vue的文档对 transtion 组件已经有了很详细的 分析了. 这里说一下我的理解: transtion 是vue提供的一个抽象组件,会在 合适的时机 帮我们操作其包裹的子元素. 这个合适的时机是: beforeEnter dom 从 js 生成,并刚插入页面的 那一帧(对应下图的动画开始) enter dom 插入页

  • vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码,具体如下: <template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList&quo

  • vue 下列表侧滑操作实例代码详解

    由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧.有点多 效果如图 <template> <div class="lottery-management-wrapper"> <ul> <li class="lottery-management-list-wrapper"> <div class="lottery-management-list" v-for="(item ,

  • 一步步教你用Vue.js创建一个组件(附代码示例)

    目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最

  • vue实现列表滚动的过渡动画

    本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码,供大家参考,具体内容如下 效果图 失帧比较严重,在手机上效果更佳. 原理分析 这个滚动页面由两个部分布局(底部固定的Tab页面除外).一个是顶部的banner轮播,一个是下面的列表.这里的重点是做列表的动画,banner轮播的网上资料很多,请自行查找. 这个动画最重要的是在滚动中实时计算startIndex和endIndex,动画比较简单,就是scale和opacity的变化.向下滚动时,startIndex变小:向上滚动时,endInd

  • vue虚拟化列表封装的实现

    目录 vue虚拟化列表封装 将下面代码复制一份到自己的项目中 vue虚拟列表-vue-virtual-scroll-list 使用场景 安装 使用 vue虚拟化列表封装 将下面代码复制一份到自己的项目中 <template> <div class="scrollParent" ref="scrollContent" @scroll="handleScroll"> <div :style="blankFill

  • Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • Vue+mui实现图片的本地缓存示例代码

    下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i < state.products.l

  • Vue 虚拟列表的实战示例

    序言 现如今,我们总是在无止境的刷.刷微博.刷抖音.刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心. 本篇讨论基于 Vue.js 的列表无限下拉实践. 我们的目标就是:让列表下拉纵享丝滑,而不是像以往的下拉就 loading 等待的体验. 译自 Better Programming 在线 Demo 设计 咱还是用 Vue CLI 来快速构建项目. 这是主页面: // EndlessList.vue <template> <div class="endless-s

随机推荐