首页 > 其他分享 >Nuxt3入门:过渡效果(第5节)

Nuxt3入门:过渡效果(第5节)

时间:2024-09-07 23:24:41浏览次数:12  
标签:pageTransition vue 入门 Nuxt3 slide 过渡 page 页面

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。

Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。

一、页面过渡效果

你可以启用页面过渡效果,以便对所有页面应用自动过渡效果。

nuxt.config.js

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

如果在布局和页面中设置了过渡效果,则在此处设置的过渡效果对那些页面将不再生效。

要在页面之间添加过渡效果,请进行以下配置:

app.vue

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

pages/index.vue

<template>
  <div>
    <h1>Home page</h1>
    <NuxtLink to="/about">About page</NuxtLink>
  </div>
</template>

pages/about.vue

<template>
  <div>
    <h1>About page</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

切换导航时的效果:
在这里插入图片描述

要为页面设置不同的过渡效果,可以在页面中使用 definePageMeta设置pageTransition

app.vue

<template>
  <NuxtPage />
</template>

<style>
/* ..其他过渡.. */

.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/about.vue

<script setup>
definePageMeta({
  pageTransition: {
    name: 'rotate'
  }
})
</script>

切换到关于页面将添加 3d 旋转效果:
在这里插入图片描述

二、布局过渡效果

你可以启用布局过渡,以便对所有布局应用自动过渡。

nuxt.config.js

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

要在页面之间添加过渡效果,请进行以下配置:

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

layouts/default.vue

<template>
  <div>
    <pre>default layout</pre>
    <slot />
  </div>
</template>

<style scoped>
div {
  background-color: lightgreen;
}
</style>

layouts/orange.vue

<template>
  <div>
    <pre>orange layout</pre>
    <slot />
  </div>
</template>

<style scoped>
div {
  background-color: #eebb90;
  padding: 20px;
  height: 100vh;
}
</style>

pages/index.vue

<template>
  <div>
    <h1>Home page</h1>
    <NuxtLink to="/about">About page</NuxtLink>
  </div>
</template>

pages/about.vue

<script setup lang="ts">
definePageMeta({
  layout: 'orange'
})
</script>

<template>
  <div>
    <h1>About page</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

页面导航效果预览:
在这里插入图片描述

当然你也可以使用以下方法将自定义应用于页面组件:

pages/about.vue

<script setup lang="ts">
definePageMeta({
  layout: 'orange',
  layoutTransition: {
    name: 'slide-in'
  }
})
</script>

三、全局过渡效果

nuxt.config.js
export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in' // default
    },
    layoutTransition: {
      name: 'slide',
      mode: 'out-in' // default
    }
  }
})

要覆盖全局过渡属性,请使用定义单个 Nuxt 页面的页面或布局过渡,并覆盖在 file 中全局定义的任何页面或布局过渡。

pages/some-page.vue

<script setup>
definePageMeta({
  pageTransition: {
    name: 'bounce',
    mode: 'out-in' // default
  }
})
</script>

四、禁用过渡效果

特定页面禁用过渡

pages/some-page.vue

<script setup>
definePageMeta({
  pageTransition: false,
  layoutTransition: false
})
</script>

全局禁用过渡效果

nuxt.config.js

export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

五、JavaScript 钩子

对于高级用例,你可以使用 JavaScript 挂钩为你的 Nuxt 页面创建高度动态和自定义的过渡。这种方式为 JavaScript 动画库提供了完美的用例。

pages/some-page.vue

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

六、动态过渡

要使用条件逻辑应用动态转换,可以利用内联中间件使用 `to.meta.pageTransition`进行判断。

layouts/default.vue

<script setup lang="ts">
const route = useRoute()
const id = computed(() => Number(route.params.id || 1))
const prev = computed(() => '/' + (id.value - 1))
const next = computed(() => '/' + (id.value + 1))
</script>

<template>
  <div>
    <slot />
    <div v-if="$route.params.id">
      <NuxtLink :to="prev">⬅️</NuxtLink> |
      <NuxtLink :to="next">➡️</NuxtLink>
    </div>
  </div>
</template>

pages/[id].vue

<script setup>
definePageMeta({
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  middleware (to, from) {
    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
      to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
  }
})
</script>

<template>
  <h1>#{{ $route.params.id }}</h1>
</template>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
</style>

页面过渡效果:
在这里插入图片描述

七、使用 NuxtPage 进行过渡

你可以使用 prop 配置 transitions 以全局激活 transitions。

app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage :transition="{
        name: 'bounce',
        mode: 'out-in'
      }" />
    </NuxtLayout>
  </div>
</template>

注意,在单个页面上使用 definePageMeta不能覆盖此页面过渡效果。

好了,分享结束,谢谢点赞,下期再见!

标签:pageTransition,vue,入门,Nuxt3,slide,过渡,page,页面
From: https://blog.csdn.net/m0_37943716/article/details/142005444

相关文章

  • Java 入门指南:Java 并发编程 —— 并发容器 ConcurrentLinkedDeque
    文章目录ConcurrentLinkedDeque特点构造方法常用方法使用示例注意事项ConcurrentLinkedDequeConcurrentLinkedDeque是Java并发工具包(java.util.concurrent包)中的一个线程安全的双端队列(Deque)实现,实现了Deque接口。它使用了链表结构,并且针对高并发环境进行了......
  • [Linux] 操作系统 入门详解
    标题:[Linux]操作系统@水墨不写bug目录一、冯.诺依曼体系结构1.冯诺依曼体系结构简介 2.对冯诺依曼体系结构的理解 二、操作系统定位1.为什么需要操作系统?2.操作系统是什么?三、系统调用和库函数 正文开始:一、冯.诺依曼体系结构1.冯诺依曼体系结构简介......
  • MaxCompute 入门:大数据处理的第一步
    在当今数字化转型的时代,企业和组织每天都在产生大量的数据。有效地管理和分析这些数据变得至关重要。阿里云的MaxCompute(原名ODPS)是一个用于处理海量数据的大规模分布式计算服务。它提供了强大的存储能力以及丰富的数据处理功能,让开发者能够快速构建数据仓库、实时报表系统、......
  • 鸿蒙HarmonyOS入门篇第一天 组件-样式-基础
    1.常用的系统组件Text显示文本lmage显示图片Colum列,内容垂直排列row行,内容水平排列button按钮 2.通用属性wight宽height高backgroundColor背景色3.尺寸单位1.px物理像素,也叫设备像素,设备实际拥有的像素点(出场设置、分辨率单位)问题:如果用px作为宽高单......
  • java入门笔记2(类和对象到接口)
    类和对象最简单的类packagestudy;publicclasstest1{publicintbrand;publicStringname;publicvoidread(){System.out.println(brand+"book");}publicvoideat(inta){System.out.println(name+"eat&quo......
  • Java网络编程入门
            在现代软件开发中,网络编程是一项不可或缺的技能。Java提供了强大的网络编程支持,使得开发者能够轻松地创建网络应用程序。今天将介绍Java中的网络编程基础,重点讲解Socket和ServerSocket类的使用。什么是Socket?        Socket是网络通信的基本组件,它为......
  • Qt C++编程 从入门到实践 彭源 清华大学出版社
    第一章程序设计基础1.2.1输入和输出操作iostream叫做标准输入输出流库头文件namespacestd叫做标准命名空间cout、cin叫做标准输出、输入流对象有时候看见std::cout的代码,是因为没有事先声明cout对象是从标准命名空间调用的,::叫做域解析运算符,作用就是指明cout这个对象是......
  • Oracle数据库安装和配置:从入门到精通,手把手带你轻松搞定!
    大家好,今天我将为大家带来一篇关于Oracle数据库安装和配置的详细教程。Oracle数据库作为业界领先的关系型数据库管理系统,广泛应用于企业级应用。本文将带你一步步完成Oracle数据库的安装和配置,让你轻松掌握这一技能。一、准备工作在开始安装Oracle数据库之前,请确保你的计......
  • 揭秘海外问卷渠道查的入门秘籍!
    海外问卷调查,作为一个互联网搬砖项目,对于许多人来说是一个相对较低门槛的行业。大家好,我是向阳问卷,专注于海外问卷渠道查项目。因为做海外问卷调查不需要我们懂得推广和运营,也不需要我们写文案,所以对我们来说技术门槛相对较低。很多人在接触过一些互联网项目后最终没能取......
  • AI产品经理入门到精通:产品经理内容分享AI产品经理需必备那些能力
    必备的AI技术知识第一章:AI产品经理是否需要懂技术及其程度在当今AI行业快速发展的背景下,作为一位AI产品经理,理解并掌握一定的AI技术知识不仅是锦上添花,更是不可或缺的素质。那么,AI产品经理究竟需要懂到何种程度的技术呢?首先,明确一点,AI产品经理并不需要成为算法专家或数据......