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

2024-09-08 04:28
文章标签 入门 效果 过渡 nuxt3

本文主要是介绍Nuxt3入门:过渡效果(第5节),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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不能覆盖此页面过渡效果。

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

这篇关于Nuxt3入门:过渡效果(第5节)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147112

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员,我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书,我不敢乱推荐,尤其是国内作者写的书,往往七拼八凑,漏洞百出。 但是,李忠老师的《C语言非常道》值得一读。对了,李老师有个官网,网址是: 李忠老师官网 最棒的是,有配套的教学视频,可以试看。 试看点这里 接下来言归正传,讲解指针。以下内容很多都参考了李忠老师的《C语言非

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在,则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By