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 相关文章推荐
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
限制只能输入数字的实现代码
May 16 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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中函数前加&amp;符号的作用分解
2014/07/08 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python3爬虫之设计签名小程序
2018/06/19 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
求职信内容考虑哪几点
2013/10/05 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
小学语文教学反思
2014/02/10 职场文书
终止合同协议书
2014/04/17 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
退税申请报告怎么写
2015/05/18 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
原告代理词范文
2015/05/25 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技