Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +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 { isChangingPage } from '../components/utils'
import { useRouter } from '../composables/router' import { useRouter } from '../composables/router'
import { defineNuxtPlugin } from '../nuxt' import { defineNuxtPlugin } from '../nuxt'
// @ts-expect-error virtual file
import { viewTransition } from '#build/nuxt.config.mjs'
export default defineNuxtPlugin((nuxtApp) => { 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 finishTransition: undefined | (() => void)
let abortTransition: 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 nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
`export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`, `export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`,
`export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`, `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') ].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. * Enable View Transition API integration with client-side router.
* @see [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) * @see [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions)
* @type {boolean | 'always'}
*/ */
viewTransition: false, viewTransition: false,