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


Posted in Javascript onMay 05, 2019

交错过渡效果

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

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

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

transition

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

这里说一下我的理解:

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

这个合适的时机是:

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

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

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);
}

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

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

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;
}

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

用 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');
    }
  }
})

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

目前来说,运行良好,实现了交错过渡的效果,也不用写大量的 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 = "";
    }
  }
})

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

嗯 不错,不过既然都上 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;
}

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

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

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 #Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 #Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
小程序关于请求同步的总结
May 05 #Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 #Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
You might like
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jquery 问答知识整理
2010/02/11 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python实现读取命令行参数的方法
2015/05/22 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python制作小说爬虫实录
2017/08/14 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python config文件的读写操作示例
2019/09/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
企业治理工作自我评价
2013/09/26 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
高三地理教学反思
2014/01/11 职场文书
大学生实习推荐信
2015/03/27 职场文书
生产现场禁烟通知
2015/04/23 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android