Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): disable View Transitions if prefers-reduced-motion (#22292)

Browse Source
This commit is contained in:
Luke Warlow 2024-01-18 10:00:41 +00:00 committed by GitHub
parent 6b651cf7bf
commit e44e8b35dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/nuxt/src/app/plugins/view-transitions.client.ts
View File

@ -1,9 +1,11 @@
import { isChangingPage } from '../components/utils'
import { useRouter } from '../composables/router'
import { defineNuxtPlugin } from '../nuxt'
// @ts-expect-error virtual file
import { viewTransition } from '#build/nuxt.config.mjs'
export default defineNuxtPlugin((nuxtApp) => {
if (!document.startViewTransition) { return }
if (!document.startViewTransition || (viewTransition !== 'always' && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) { return }
let finishTransition: undefined | (() => void)
let abortTransition: undefined | (() => void)

3
packages/nuxt/src/core/templates.ts
View File

@ -386,7 +386,8 @@ export const nuxtConfigTemplate: NuxtTemplate = {
`export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
`export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`,
`export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`,
`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`
`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`,
`export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`
].join('\n\n')
}
}

1
packages/schema/src/config/experimental.ts
View File

@ -158,6 +158,7 @@ export default defineUntypedSchema({
/**
* Enable View Transition API integration with client-side router.
* @see [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions)
* @type {boolean | 'always'}
*/
viewTransition: false,