nuxt3实现路由/页面切换左右滚动效果

效果

1、点击订单中心时 页面从右向左滚动动画效果切屏

image.png

2、点击产品购买时 页面从左向右滚动动画效果切屏

image.png

实现步骤

1. nuxt.config.ts文件

export default defineNuxtConfig({
  app: {
      pageTransition: { name: 'page', mode: 'out-in' }
  }
})

2. app.vue文件

<template>
    <main :class="{left: currentName == 'purchase', right: currentName == 'order'}">
        <NuxtLayout>
            <!-- <NuxtPage /> -->
            <NuxtPage keepalive/>
        </NuxtLayout>  
    </main>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
useHead({
  meta: [
      {name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' }
  ]
})

const currentName = ref()
watch(() => route.name, (current) => {
    currentName.value = current
})

</script>

<style lang="scss">
body, html {
    width: 100%;height: 100%;font-size: 12px; padding: 0; margin: 0;
}
.left {
    .page-enter-active,.page-leave-active {
        transition: transform 0.1s ease-in-out;
    }
    .page-enter-from  {
        transform: translateX(100%);
    }
    .page-leave-to{
        transform: translateX(-100%);
    }
}
.right {
    .page-enter-active,.page-leave-active {
        transition: transform 0.1s ease-in-out;
    }
    .page-enter-from  {
        transform: translateX(-100%);
    }
    .page-leave-to{
        transform: translateX(100%);
    }
}
</style>