diff options
| -rw-r--r-- | packages/astro/src/@types/astro.ts | 7 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/transition.ts | 59 | ||||
| -rw-r--r-- | packages/astro/src/transitions/index.ts | 2 |
3 files changed, 44 insertions, 24 deletions
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 368a87139..3231b6622 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -77,7 +77,12 @@ export interface TransitionDirectionalAnimations { backwards: TransitionAnimationPair; } -export type TransitionAnimationValue = 'initial' | 'slide' | 'fade' | 'none' | TransitionDirectionalAnimations; +export type TransitionAnimationValue = + | 'initial' + | 'slide' + | 'fade' + | 'none' + | TransitionDirectionalAnimations; // Allow users to extend this for astro-jsx.d.ts // eslint-disable-next-line @typescript-eslint/no-empty-interface diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index fd01ff5c0..88a41d9ae 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -1,8 +1,4 @@ -import type { - SSRResult, - TransitionAnimation, - TransitionAnimationValue, -} from '../../@types/astro'; +import type { SSRResult, TransitionAnimation, TransitionAnimationValue } from '../../@types/astro'; import { fade, slide } from '../../transitions/index.js'; import { markHTMLString } from './escape.js'; @@ -23,16 +19,16 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { - return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '') + return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, ''); } -type Entries<T extends Record<string, any>> = Iterable<[keyof T, T[keyof T]]> +type Entries<T extends Record<string, any>> = Iterable<[keyof T, T[keyof T]]>; const getAnimations = (name: TransitionAnimationValue) => { if (name === 'fade') return fade(); if (name === 'slide') return slide(); if (typeof name === 'object') return name; -} +}; export function renderTransition( result: SSRResult, @@ -45,17 +41,19 @@ export function renderTransition( const scope = createTransitionScope(result, hash); const name = transitionName ? toValidIdent(transitionName) : scope; const sheet = new ViewTransitionStyleSheet(scope, name); - + const animations = getAnimations(animationName); if (animations) { for (const [direction, images] of Object.entries(animations) as Entries<typeof animations>) { - for (const [image, rules] of Object.entries(images) as Entries<typeof animations[typeof direction]>) { + for (const [image, rules] of Object.entries(images) as Entries< + (typeof animations)[typeof direction] + >) { sheet.addAnimationPair(direction, image, rules); } } } else if (animationName === 'none') { - sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;') - sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;') + sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;'); + sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;'); } result._metadata.extraHead.push(markHTMLString(`<style>${sheet.toString()}</style>`)); @@ -63,15 +61,22 @@ export function renderTransition( } class ViewTransitionStyleSheet { - private modern: string[] = [] - private fallback: string[] = [] + private modern: string[] = []; + private fallback: string[] = []; - constructor(private scope: string, private name: string) {} + constructor( + private scope: string, + private name: string + ) {} toString() { const { scope, name } = this; - const [modern, fallback] = [this.modern, this.fallback].map(rules => rules.join('')); - return [`[data-astro-transition-scope="${scope}"] { view-transition-name: ${name}; }`, this.layer(modern), fallback].join('') + const [modern, fallback] = [this.modern, this.fallback].map((rules) => rules.join('')); + return [ + `[data-astro-transition-scope="${scope}"] { view-transition-name: ${name}; }`, + this.layer(modern), + fallback, + ].join(''); } private layer(cssText: string) { @@ -84,16 +89,26 @@ class ViewTransitionStyleSheet { addAnimationRaw(image: 'old' | 'new' | 'group', animation: string) { const { scope, name } = this; - this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`) - this.addRule('fallback', `[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`) + this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`); + this.addRule( + 'fallback', + `[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }` + ); } - addAnimationPair(direction: 'forwards' | 'backwards', image: 'old' | 'new', rules: TransitionAnimation | TransitionAnimation[]) { + addAnimationPair( + direction: 'forwards' | 'backwards', + image: 'old' | 'new', + rules: TransitionAnimation | TransitionAnimation[] + ) { const { scope, name } = this; const animation = stringifyAnimation(rules); const prefix = direction === 'backwards' ? `[data-astro-transition=back]` : ''; - this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`) - this.addRule('fallback', `${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`) + this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`); + this.addRule( + 'fallback', + `${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }` + ); } } diff --git a/packages/astro/src/transitions/index.ts b/packages/astro/src/transitions/index.ts index b21878331..7d4711a32 100644 --- a/packages/astro/src/transitions/index.ts +++ b/packages/astro/src/transitions/index.ts @@ -47,7 +47,7 @@ export function slide({ } export function fade({ - duration + duration, }: { duration?: string | number; } = {}): TransitionDirectionalAnimations { |