百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转

作者:鹏仔先生日期:2024-04-16 11:11:49浏览:1442分类:JavaScript

Hello,大家好,我是小编鹏仔,鹏仔一直觉得VUE在H5端路由跳转时交互特别丑,一直想写成那种点击滑动切换类的效果,趁着这两天工作不是很忙就网上搜了下,最终在多个搜索结果中选择了一种方式实现,效果如下图所示,点击路由跳转时是页面是滑动切换。

3434232.gif

逻辑其实还是很简单的,就是监听在路由切换时加css效果即可,下方跟着鹏仔来一步一步的去添加实现吧!


首先,我们在router.js中,给每个要切换的路由meta中加index索引,用来判断页面动画的方向(页面在返回或者跳转判断向右滑动还是向左滑动方向,简单理解为上下页区分吧)。

{
    path: '/feedbackList',
    name: 'feedbackList',
    component: () => import('../views/teacher/feedbackList/index'),
    meta:{
      title: "反馈列表",
      index: 1
    }
  },
  {
    path: '/feedbackRecordList',
    name: 'feedbackRecordList',
    component: () => import('../views/teacher/feedbackList/record'),
    meta:{
      title: "记录列表",
      index: 2
    }
  },
  {
    path: '/feedbackRecordDetails',
    name: 'feedbackRecordDetails',
    component: () => import('../views/teacher/feedbackList/details'),
    meta:{
      title: "记录详情",
      index: 3
    }
  }


接着,我们打开 App.vue 页面

<router-view />

修改为

<transition :name="transitionName">
  <router-view />
</transition>


在data中定义

data() {
  return {
    transitionName: "",
  };
}


在watch中监听路由跳转时修改name

watch:{
  $route(to,from){
    //实现路由跳转动画
    if (to.meta.index > from.meta.index)  
      this.transitionName = "slide-left";
    if (to.meta.index < from.meta.index)
      this.transitionName = "slide-right";
  }
}


最后在css中添加样式,即可实现

.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {
  will-change: transform;
  transition: all .5s;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translateX(100%);
}
.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translateX(-100%);
}


这个切换是使用了css的位移属性,如果您时间够闲,可以改为 渐变 旋转 缩放 等花里胡哨的效果(https://www.sharedbk.com/post/131.html)。


下方为完整的App.vue页面的代码

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName: "",
    };
  },
  methods: {
  },
  components: {
  },
  watch:{
    $route(to,from){
      //实现路由跳转动画
      if (to.meta.index > from.meta.index)  
        this.transitionName = "slide-left";
      if (to.meta.index < from.meta.index)
        this.transitionName = "slide-right";
    }
  }
}
</script>

<style>
#app {
  height: 100%;
  min-height: 100%;
}
/* 路由页面跳转交互 */
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {
  will-change: transform;
  transition: all .5s;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translateX(100%);
}
.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translateX(-100%);
}
</style>


鹏仔扩展

<transition name=""></transition>

v-enter:进入(显示)开始时的状态

v-enter-active:进入(显示)过程中的状态

v-enter-to:进入(显示)结束时的状态

v-leave:离开(隐藏)开始时的状态

v-leave-active:离开(隐藏)过程中的状态

v-leave-to:离开(隐藏)结束时的状态


手机扫码访问

已有1位网友发表了看法:

取消回复欢迎 发表评论:

关灯