vue 巧用过渡效果(小结)


Posted in Javascript onSeptember 22, 2018

vue提供的了transition组件来实现组件的过渡和路由的过渡,合理使用这个组建可以让我们的页面更加的灵活,提高用户体验。

概念

在进入/离开的过渡中, 会有6个class的切换, 抄一张官方的图

vue 巧用过渡效果(小结)

  • v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
  • v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  • v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

看起来还是有有点乱,先来捋一下。

vue 巧用过渡效果(小结)

enter 定义开始的状态, active定义过程, enter定义结束, 但是在实际进行的时候是有交叉的。 通过断点可以发现,

  • 添加v-enter
  • 添加v-enter-active,
  • 卸载v-enter
  • 添加v-ernter-to
  • 卸载v-enter-to和v-enter-active
// transition: all 2s; 
 .move-enter {
  margin-left: 0;
 }
 .move-enter-active {
  margin-left: 100px;
 }
 .move-enter-to {
  margin-left: 200px;
 }

例如在上面这种情况下, 过渡动画会怎么进行呢?

vue 巧用过渡效果(小结)

这里要注意两点。

  1. enter-active覆盖掉了enter的起点位置
  2. 一共经过了两次过渡, enter-to是在active结束之后开始的, 所以第四秒, 才回到dom元素本身的位置。

所以官方文档之, 也是使用v-enter定义起点位置, 在enter-active中控制效果。

利用class实现过渡效果

在这6个class之上, 利用transition或者动画, 都可以实现我们需要的效果。 举个栗子, 这里我们直接将所有的路由改变都定义一个过渡效果,

appear属性表示页面初次加载的时候也适用于动画

<transition appear name="move">
  <router-view></router-view>
 </transition>
@keyframes animationIn {
 0% {
 transform: translate(-100%, 0);
 }
 100% {
 transform: translate(0, 0);
 }
}
@keyframes animationOut {
 0% {
 transform: translate(0, 0);
 }
 100% {
 transform: translate(100%, 0);
 }
}

.move-enter {
 transform: translate(-100%, 0);
 position: absolute!important;
 z-index: 999;
 top: 0;
 left: 0;
 width: 100%;
}
.move-enter-active {
 animation: animationIn 0.2s;
 position: absolute!important; // 进入的组件要覆盖掉移除的组件,参考 //https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F
 z-index: 999;
 top: 0;
 left: 0;
 width: 100%;
}
.move-leave {
 transform: translate(0, 0);
}
.move-leave-active {
 animation: animationOut 0.2s;
}

效果

vue 巧用过渡效果(小结)

JavaScript 钩子

这些钩子函数可以结合 CSS transitions/animations 使用

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"

 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>

在这些钩子中, 可以使用其他第三方库,回调中的el将是真实的dom元素 举个栗子, 这里使用了官方推荐的Velocity.js作为动画库

<div class="main">
  <transition name="showRect" appear
     @before-enter="handleBeforeEnter"
     @enter="handleEnter"
     @after-enter="handleAfterEnter"
     @before-leave="handleBeforeLeave"
     @leave="handleLeave"
     @after-leave="handleAfterLeave"
     :css="false">
  <div class="box" v-if="show"></div>
  </transition>
 </div>
 <button @click="start">切换</button>
methods: {
  start() {
  this.show = !this.show
  },
  handleBeforeEnter: function (el) {
  el.style.opacity = 0;
  console.log('方块显示动画即将执行');
  },
  handleEnter: function (el, done) {
  Velocity(el, 'stop');
  Velocity(el, {
   backgroundColor: '#0085eb',
   opacity: 1,
   translateX: 260,
   rotateZ: ['360deg', 0]
  }, {
   duration: 1000,
   easing: [ 0.4, 0.01, 0.165, 0.99 ],
   complete: done
  });
  console.log('方块显示动画执行中...');
  },
  handleAfterEnter: function (el) {
  console.log('方块显示动画结束');
  },
  handleBeforeLeave: function (el) {
  console.log('方块隐藏动画即将执行');
  },
  handleLeave: function (el, done) {
  Velocity(el, 'stop');
  Velocity(el, {
   backgroundColor: '#4dd0e1',
   opacity: 0,
   translateX: 0,
   rotateZ: [0, '360deg']
  }, {
   duration: 1000,
   easing: [ 0.4, 0.01, 0.165, 0.99 ],
   complete: done
  });
  console.log('方块隐藏动画执行中...');
  },
  handleAfterLeave: function (el) {
  console.log('方块隐藏动画结束');
  }
 }

vue 巧用过渡效果(小结)

列表过渡

vue还提供了transition-group组件, 作为列表过渡的容器

不同于 ,它会以一个真实元素呈现:默认为一个 。你也可以通过 tag 特性更换为其他元素

transition-group 拥特别的v-move属性,它会在元素的改变定位的过程中应用, 效果可参见官网。

其他的就不抄官网了

列表过渡中, 可以结合js钩子, 实现一些特殊的效果

举个栗子

<template>
 <div>
 <div class="btn" @click="addItem">添加</div>
 <div class="btn" @click="sort">排序</div>
 <div class="box">
  <div class="item-bar">
  <transition-group name="fade" tag="p" appear
  v-on:before-enter="beforeEnter"
  v-on:after-enter="afterEnter">
  // 这里的data-index 是一个识别标识, 便于在js钩子中获得当前元素的序号
   <div class="item" v-for="(i, index) in list" :key="i" :data-index="index">{{i}}</div>
  </transition-group>
  </div>
 </div>
 </div>
</template>
<script lang="ts">
 import Vue from "vue";
 export default Vue.extend({
 name: "home",
 data() {
  return {
  show: true,
  list: [5,4,3,2,1],
  nextNum: 6
  };
 },
 methods: {
  showDom() {
  this.show = !this.show
  },
  beforeEnter: function (el: any) {
  el.style.opacity = 0 // 每个元素插入之前, 透明度为0
  let index = el.dataset.index 每次可能插入多个元素,
  // 页面加载时先展示5个
  if (index < 5) {
   //设置动画延迟, 实现按续插入的效果
   el.style.animationDelay = el.dataset.index * 0.3 + 's'
  }
  },
  afterEnter: function (el) {
  el.style.opacity = 1
  console.log('afterEnter')
  },
  addItem() {
  this.list.push(this.nextNum++)
  },
  sort() {
  this.list = this.list.sort((a, b) => a -b)
  }
 }
 });
</script>
@keyframes animat {
 0% {
  margin-left: 300px;
  opacity: 0;
 }
 100% {
  margin-left: 0;
  opacity: 1;
 }
 }
 .fade-enter {
 opacity: 0;
 margin-left: 300px;
 }
 .fade-enter-active {
 opacity: 0;
 animation: animat 1s;
 }
 .fade-enter-to {
 opacity: 1;
 margin-left: 0;
 }

 .fade-move {
 transition: all 0.3s;
 }
 .fade-leave {
 left: 10px;
 }
 .fade-leave-active {
 transition: all 2s ease-out;
 }
 .fade-leave-to {
 left: -100%;
 }

效果

vue 巧用过渡效果(小结)

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

Javascript 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 #Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 #Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 #Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 #Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jsTree使用记录实例
2016/12/01 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python Deque 模块使用详解
2014/07/04 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python模块导入的细节详解
2018/12/10 Python
django 类视图的使用方法详解
2019/07/24 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
初级职称评定工作总结
2015/08/13 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书