小结vue过渡效果

  • 时间:
  • 9812人关注

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于vue、过渡效果、vue的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

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 巧用过渡效果(小结)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


上一篇:vue使用mui的弹出日期选择插件实例详解

下一篇:在vue项目中使用layui框架的方法及采坑总结

相关内容

  • Springboot项目与vue项目整合打包的实例操作方法

    这篇文章主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    07-07Springboot项目与vue项目整合打包的实现方式

    阅读更多
  • Vue中beforeEach非登录不能访问的实例详解

    这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    01-02Vue之beforeEach非登录不能访问的实现(代码亲测)

    阅读更多
  • vue自定义H5视频播放器的实现代码

    这篇文章主要介绍了vue实现自定义H5视频播放器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    02-01vue实现自定义H5视频播放器的方法步骤

    阅读更多
  • Vue实例和数据绑定

    在本篇文章里小编给大家整理的是关于Vue数据绑定实例写法以及相关知识点,需要的朋友们学习下。

    03-13Vue数据绑定实例写法

    阅读更多
  • Vue路由之JWT身份认证实例代码

    这篇文章主要介绍了Vue路由之JWT身份认证的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    03-02Vue路由之JWT身份认证的实现方法

    阅读更多
  • Vue.js前端开发:快速入门与专业应用

    Vue.js前端开发:快速入门与专业应用

    本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

    大小:3.6KB MB前端开发

    点击下载
  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

    大小:59150 MB MJS实例

    点击下载
  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小:109.6 MBVue.js实战

    点击下载
  • 前端工程师必备技能:Vue移动开发实战技巧

    前端工程师必备技能:Vue移动开发实战技巧

    Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

    大小:122 MBVue实战

    点击下载
  • 水晶石技法VUE 10完全学习手册

    水晶石技法VUE 10完全学习手册

    《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

    大小:114191 MB VUE10学习手册

    点击下载
  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

    大小:196.3 MBSpring

    点击下载
  • Vue.js项目实战

    Vue.js项目实战

    Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

    大小:141 MBVue

    点击下载
  • Vue.js实战

    Vue.js实战

    尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

    大小:196.7 MBVue

    点击下载
  • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小:132979 MB 项目实战

    点击下载

学习笔记