4.8-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》过渡动画

~/nuxt.config.ts

export default defineNuxtConfig({

  app: {

    //pageTransition: false, //全局关闭页面过渡动画

    pageTransition: { name: 'page', mode: 'out-in' }

  }

})

~/app.vue

<template>

  <NuxtLayout>

    <div class="app-box">

      <NuxtPage />

    </div>

  </NuxtLayout>

</template>

<style>

  /* 过渡动画：样式名为page，需与~/nuxt.config.ts中过渡名称一致 */

  .page-enter-active,.page-leave-active {

    transition: all 0.4s;

  }

  .page-enter-from,.page-leave-to {

    opacity: 0;

    filter: blur(1rem);

  }

  /* 过渡动画：样式名为rotate，需与页面的definePageMeta中过渡名称一致 */

  .rotate-enter-active,.rotate-leave-active {

    transition: all 0.4s;

  }

  .rotate-enter-from,.rotate-leave-to {

    opacity: 0;

    transform: rotate3d(1, 1, 1, 15deg);

  }

</style>

~/pages/transition/page.vue

<template>

  <div>

    <BaseFooLink></BaseFooLink>

    <h6>页面过渡之页面自定义过渡名称的示例。</h6>

    <div>

      页面过渡动画需要在页面间切换才会有效果，

      如果使用网址直接访问是没有过渡效果。

    </div>

  </div>

</template>

<script setup>

definePageMeta({

  //pageTransition: false, //关闭页面过渡动画

  pageTransition: {

    name: 'rotate'

  }

})

</script>

~/pages/index.vue

<template>

<div>

<p>欢迎访问首页，开启Nuxt3之旅！</p>

<div v-for="(page,index) in pageLinks" :key="index">

<NuxtLink :to="page.url">{{page.text}}</NuxtLink>

</div>

</div>

</template>

<script setup>

const pageLinks = [{

url: "/transition/page",

text: "4.9.1 页面过渡动画"

}];

</script>