Vue 同级别路由前进后退动画实现

最新推荐文章于 2021-12-17 09:54:22 发布

dengye7077

最新推荐文章于 2021-12-17 09:54:22 发布

阅读量213

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yzyh/p/10313306.html

版权

本文详细介绍如何在Vue项目中实现基于路由变化的滑动过渡动画效果，通过监听路由变化，动态设置过渡名称，实现页面切换时的左滑和右滑动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue

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

<script>

export default {
  name: "App",
  data() {
    return {
      transitionName: "slide-left"
    };
  },
  watch: {
    '$route'(to, from) {
      //获取当前路由数据，并转化为数组，没有就默认为空
      let routersArr=sessionStorage.getItem('routers')&&sessionStorage.getItem('routers').split(',')||[];
      //如果当前的路由数组为空那么添加 from 的路径以及 to 的路径
      if(routersArr.length==0){
        routersArr.push(from.path);
        routersArr.push(to.path);
      }else{
        //检查即 to 的路径，如果存在在当前路由数组，那么是返回操作，删除此路径及以后的路径
        if(routersArr.indexOf(to.path)!=-1){
          this.transitionName='slide-right';
          routersArr.splice(routersArr.indexOf(to.path)+1,100);
          //如果不存在，那么添加该路径到路由数组中
        }else{
          this.transitionName='slide-left';
          routersArr.push(to.path);
        }
      }
      //存入本地sessionStorage,并转为字符串
      sessionStorage.setItem('routers',routersArr.join(','));
    }
  }
};
</script>

<style>
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100px, 0);
  transform: translate(100px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100px, 0);
  transform: translate(-100px, 0);
}
</style>

转载于:https://www.cnblogs.com/yzyh/p/10313306.html