提交源文件

src/App.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="wrapper">
+    <div class="animation">
+      <router-view v-slot="{ Component }">
+        <transition :name="transitionName">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+let transitionName = ref();
+let router = useRouter();
+router.beforeEach((to, from) => {
+  // 根据路由标记判断触发哪个动画
+  if (to.meta.index > from.meta.index) {
+    // 从右往左动画
+    transitionName.value = "slide-right";
+  } else if (to.meta.index < from.meta.index) {
+    // 从左往右动画
+    transitionName.value = "slide-left";
+  } else {
+    transitionName.value = "";
+  }
+});
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+.mt50 {
+  margin-top: 50px;
+}
+.wrapper {
+  overflow-x: hidden;
+  .animation {
+    display: flex;
+    width: 200%;
+    & > div {
+      width: 50%;
+    }
+    .slide-left-enter-active,
+    .slide-left-leave-active,
+    .slide-right-enter-active,
+    .slide-right-leave-active {
+      transition: transform 0.3s;
+    }
+    .slide-right-enter-from {
+      transform: translateX(0);
+    }
+    .slide-right-enter-to {
+      transform: translateX(-100%);
+    }
+    .slide-right-leave-from {
+      transform: translateX(0);
+    }
+    .slide-right-leave-to {
+      transform: translateX(-100%);
+    }
+    .slide-left-enter-from {
+      transform: translateX(-200%);
+    }
+    .slide-left-enter-to {
+      transform: translateX(-100%);
+    }
+    .slide-left-leave-from {
+      transform: translateX(0);
+    }
+    .slide-left-leave-to {
+      transform: translateX(100%);
+    }
+  }
+}
+</style>