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

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

image.png
实现步骤
- nuxt.config.ts文件
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' }
}
})
- 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>
网友评论