Vue路由跳转页面过渡效果

·  阅读 677

记录一下日常开发遇到的疑难杂症

最近在写一个Vue的项目,多个页面跳转太过于生硬,想要在页面跳转间加入一些过渡效果

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

<transition>
 <router-view></router-view>
</transition>
复制代码

过渡阶段的类名

对于这些在过渡中切换的类名来说中,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

在进入/离开的过渡中,会有 6 个 class 切换。

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

除),在过渡/动画完成之后移除。

transition.png

transition属性

  • name - string,用于自动生成 CSS 过渡类名。例如:name: 'fade' 将自动拓展为.fade-enter.fade-enter-active等。默认类名为 "v"
  • appear - boolean,是否在初始渲染时使用过渡。默认为 false
  • css - boolean,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。
  • type - string,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
  • mode - string,控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out";默认同时进行。
  • duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

过渡模式mode:

            1.in-out:新元素先进入过渡,完成之后当前元素过渡离开。

            2.out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

我懒得看我要直接用(代码实现)

App.vue 中编写代码

<template>
  <div id="app">
    <transition name="slide-left" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>


<style>
.slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }
</style>
复制代码

参考文章:vue 路由过渡动效 - Jade_g - 博客园 (cnblogs.com)

ps:本来想看大佬的笔记整理自己的心得,大佬写的太好了,直接搬运了,仅供大家参考学习。

分类:
前端
分类:
前端