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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
vue3.0 上手体验
Sep 21 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+mysql 实现身份验证代码
2010/03/24 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
python僵尸进程产生的原因
2017/07/21 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
生产实习心得体会范文
2016/01/22 职场文书
高中历史教学反思
2016/02/19 职场文书
学习nginx基础知识
2021/09/04 Servers
Java实现给Word文件添加文字水印
2022/02/15 Java/Android