路由动画切换( 左移,右移)

简介: 路由动画切换( 左移,右移)

举例:vue项目

1、在路由表中修改

在vue中路由表 定义meta属性 index 值 用index值来判断是左移还是右移



2、 在App入口文件处

<router-view v-slot="{ Component }">
      <transition :name="transitionName" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
 data() {
    return {
      // schema: "MainFade",
      transitionName: "slide-left",
    };
  },
watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        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 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

vue完整App

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition :name="transitionName" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script>
export default {
  name: "AppTestApp",
  data() {
    return {
      // schema: "MainFade",
      transitionName: "slide-left",
    };
  },
  mounted() {},
  methods: {},
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      console.log(to, "to");
      console.log(from, "from");
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },
};
</script>
<style>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>

如果是其他框架上中(React,umi,…)

逻辑都是一样的

实现思路

1、 在router路由表中定义meta属性中的index,

2、在入口文件处判断to和from中的index值大小,来进行路由动画的切换

相关文章
|
小程序 JavaScript
小程序动画animation向左移动效果
小程序动画animation向左移动效果
67 0
|
6月前
|
运维 安全 Devops
什么是安全左移,如何实现安全左移
传统软件开发面临安全挑战,如意识缺失、代码漏洞、第三方组件风险、配置管理问题及应对新型攻击能力不足。为改善现状,需采取安全左移策略,将安全措施提前至开发早期,与SDL结合,确保安全贯穿SDLC始终。安全左移面临计划制定、责任转移、工具选择等挑战,需通过规划、培训和选用合适工具应对。DevSecOps模式进一步将安全融入DevOps,提升开发效率和软件安全性,实现开发、安全和运维的协同。SDL与DevSecOps相辅相成,前者注重安全过程,后者强调安全文化与自动化。
284 1
什么是安全左移,如何实现安全左移
|
6月前
|
自然语言处理 IDE 测试技术
测试左移的方法
测试左移的方法
|
6月前
|
测试技术
测试右移
测试右移
测试右移
|
6月前
uniapp的步进器
uniapp的步进器
122 0
解决 010Edittor 复制右边到左边的问题
解决 010Edittor 复制右边到左边的问题
173 1
|
编译器
【逻辑位移和算数位移】
【逻辑位移和算数位移】
算数右移和逻辑右移的区别及逻辑运算的窍门
算数右移和逻辑右移的区别及逻辑运算的窍门
696 0
|
JavaScript
js布尔值的 取反点击开-关
js布尔值的 取反点击开-关
142 0
|
Java Python
进制的底层逻辑规则 左移<< 右移>> 取反加一 补位原则 正负数 相反数等 文章中含验证源码
进制的底层逻辑规则 左移<< 右移>> 取反加一 补位原则 正负数 相反数等 文章中含验证源码
145 0
进制的底层逻辑规则 左移<< 右移>> 取反加一 补位原则 正负数 相反数等 文章中含验证源码