vue 组件中使用 transition 和 transition-group实现过渡动画


Posted in Javascript onJuly 09, 2019

前言

记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版...

template模板结构

// 单个元素
  <transition name="自定义名字">
   <p v-if="show">hello</p>
  </transition>
 // 列表元素: 注意group的直接子元素是v-for渲染出来的
  <ul class="list">
   <transition-group name="list">
    <li v-for="(item, index) in gameList" :key="item.id">
     <app-horizontal :itemData="item"></app-horizontal>
    </li>
   </transition-group>
  </ul>

name 版,name 为组件中的属性

出现的过程: name-enter(初始态) => name-enter-active(中间态) => name-enter-to(终止态)
消失的过程: name-leave => name-leave-active => name-leave-to
以进场过渡动画为例子

我们可以分别设置 enter 阶段 和 enter-to 阶段的动画

  1.设置进入时需要过渡的属性

.name-enter
 {
  opacity: 0;
  transform: translateY(30px)
 }

  2.然后在 name-enter-active中设置过渡时间

.name-enter-active {
  transition: all .3s;
 }

  3.最后在 name-enter-to 中写上终止态属性

    其实终止态的opacity: 1;transform: none; 是默认的,可以不用写

.name-enter-to {
  opacity: 1;
  transform: translateY(0);
 }

  如果要给列表中的元素设置交错的效果, 元素不多的话可以添加 delay 属性

.name-enter-active:nth-child(3n+1) {
  transition-delay: 0s;
 }
 .name-enter-active:nth-child(3n+2) {
  transition-delay: .1s;
 }
 .name-enter-active:nth-child(3n+3) {
  transition-delay: .2s;
 }

  离场动画同理...

js 钩子实现过渡动画: 通过操作类名; 就是 name 版的 js 实现

// 例如实现上述列表依次显示
 <ul class="list">
  <transition-group
   v-bind:css="false"
   v-on:before-enter="beforeEnter"
   v-on:enter="enter"
   v-on:after-enter="afterEnter">
   <li v-for="(item, index) in gameList" 
    :key="item.id" 
    :data-delay="index*100" 
   >
     <app-horizontal :itemData="item"></app-horizontal>
   </li>
  </transition-group>
 </ul> 
 // 
 methods: {
  // 事先定义上述类名
  // 在beforeEnter enter afterEnter 钩子中手动操作上述类名
  
  // 初始态
  beforeEnter(dom) {
   dom.classList.add('list-enter', 'list-enter-active');
  },
  // 中间态
  enter(dom,done) {
   // 通过 setTimeout + dataset 实现过渡
   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()
    });
   }, delay)
  },
  // 终止态
  afterEnter(dom) {
   dom.classList.remove('list-enter-to', 'list-enter-active');
  }
 }

js 钩子过渡动画: 通过操作行内属性, 自定义动画

<ul class="list">
  <transition-group
   v-bind:css="false"
   v-on:before-enter="beforeEnter"
   v-on:enter="enter"
   v-on:after-enter="afterEnter">
   <li v-for="(item, index) in gameList" 
    :key="item.id" 
    :data-delay="index*100"
    data-y = "100%" 
   >
     <app-horizontal :itemData="item"></app-horizontal>
   </li>
  </transition-group>
 </ul> 
 // 对应的操作方法; 添加自定义的 dataset,给dom设置css样式;根据需求添加
  methods: {
   // 初始态
  beforeEnter(dom) {
   let { x = 0, y = 0, opacity = 0 } = dom.dataset;
   dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: translateX(${x}) translateY(${y});`;
  },
  // 中间态
  enter(dom,done) {
   let delay = dom.dataset.delay;
   setTimeout(function () {
    dom.style.cssText = `transition: .3s;opacity: 1;transform: translateX(0) translateY(0);`;
    //监听 transitionend 事件
    var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
    dom.addEventListener(transitionend, function onEnd() {
       dom.removeEventListener(transitionend, onEnd);
       done(); 
    });
   }, delay)
  },
  // 终止态
  afterEnter(dom) {
   dom.style.cssText = "";
  }
 }

这里记录一下监听css3的animation动画和transition事件:

webkit-animation动画有三个事件:
  开始事件: webkitAnimationStart
  结束事件: webkitAnimationEnd
  重复运动事件: webkitAnimationIteration
css3的过渡属性transition: 一个事件
  过渡结束: webkitTransitionEnd

总结

以上所述是小编给大家介绍的vue 组件中使用 transition 和 transition-group实现过渡动画 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
js计算精度问题小结
Apr 22 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 #Javascript
JavaScript中var的重要性实例分析
Jul 09 #Javascript
js图片无缝滚动插件使用详解
May 26 #Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 #Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 #Javascript
微信小程序如何访问公众号文章
Jul 08 #Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
You might like
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python实现大文本文件分割
2019/07/22 Python
如何通过python实现全排列
2020/02/11 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
标准自荐信范文
2014/01/29 职场文书
2014年生产部工作总结
2014/12/17 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android
使用MybatisPlus打印sql语句
2022/04/22 SQL Server