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 使用手册(七)
Sep 23 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
详解php的socket通信
2015/08/11 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Vue事件处理原理及过程详解
2020/03/11 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
如何更优雅地写python代码
2019/07/02 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python判断正负数方式
2020/06/03 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python简单实现9宫格图片实例
2020/09/03 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
四年级科学教学反思
2014/02/10 职场文书
教育技术职业规划范文
2014/03/04 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
SQL中的连接查询详解
2022/06/21 SQL Server