withastro · natemoo-re · Aug 24, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023
diff --git a/.changeset/five-geese-crash.md b/.changeset/five-geese-crash.md
@@ -0,0 +1,11 @@
+---
+'astro': major
+---
+
+Adjust default [View Transition](https://docs.astro.build/en/guides/view-transitions/) animations. Astro now sets opinionated defaults rather than relying on the browser's default User Agent styles.
+
+Notably, Astro now disables the `root` animation rather than keeping the browser's default crossfade. The browser default behavior can still be used by setting the `transition:animate="initial"` directive on your `html` element.
+
+Elements with a `transition:name` directive but no `transition:animate` directive will default to `crossfade`, a snappier version of the default User Agent animation.
+
+Astro also supports a few new out-of-the-box `transition:animate` animations: `none` and `crossfade` join the existing `fade` and `slide` animations. `morph` has been renamed to `initial`.
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
@@ -54,3 +54,16 @@
 		animation: none !important;
 	}
 }
+
+/* Opinionated Astro default: disable animation for root transition */
+/* To opt-in to the default user agent style, set `<html transition:animate="initial">` */
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
@@ -32,7 +32,7 @@ const { link } = Astro.props as Props;
 		</script>
 	</head>
 	<body>
-		<header transition:animate="morph">
+		<header transition:animate="initial">
 			<h1>testing</h1>
 		</header>
 		<main transition:animate="slide">

diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -119,7 +119,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^2.0.0",
+    "@astrojs/compiler": "^2.0.1",
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -78,7 +78,7 @@ export interface TransitionDirectionalAnimations {
 	backwards: TransitionAnimationPair;
 }
 
-export type TransitionAnimationValue = 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
+export type TransitionAnimationValue = 'crossfade' | 'initial' | 'slide' | 'fade' | 'none' | TransitionDirectionalAnimations;
 
 // Allow users to extend this for astro-jsx.d.ts
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -94,7 +94,7 @@ export interface AstroBuiltinAttributes {
 	'set:html'?: any;
 	'set:text'?: any;
 	'is:raw'?: boolean;
-	'transition:animate'?: 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
+	'transition:animate'?: TransitionAnimationValue;
 	'transition:name'?: string;
 	'transition:persist'?: boolean | string;
 }

diff --git a/packages/astro/src/core/compile/compile.ts b/packages/astro/src/core/compile/compile.ts
@@ -45,8 +45,6 @@ export async function compile({
 			astroGlobalArgs: JSON.stringify(astroConfig.site),
 			scopedStyleStrategy: astroConfig.scopedStyleStrategy,
 			resultScopedSlot: true,
-			experimentalTransitions: astroConfig.experimental.viewTransitions,
-			experimentalPersistence: astroConfig.experimental.viewTransitions,
 			transitionsAnimationURL: 'astro/components/viewtransitions.css',
 			preprocessStyle: createStylePreprocessor({
 				filename,

diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts
@@ -4,7 +4,7 @@ import type {
 	TransitionAnimationValue,
 	TransitionDirectionalAnimations,
 } from '../../@types/astro';
-import { fade, slide } from '../../transitions/index.js';
+import { fade, slide, crossfade } from '../../transitions/index.js';
 import { markHTMLString } from './escape.js';
 
 const transitionNameMap = new WeakMap<SSRResult, number>();
@@ -22,78 +22,80 @@ export function createTransitionScope(result: SSRResult, hash: string) {
 	return `astro-${hash}-${num}`;
 }
 
+// Ensure animationName is a valid CSS identifier
+function toValidIdent(name: string): string {
+	return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '')
+}
+
+const BUILTIN_TRANSITION_ANIMATIONS = { fade, slide, crossfade };
+
 export function renderTransition(
 	result: SSRResult,
 	hash: string,
 	animationName: TransitionAnimationValue | undefined,
 	transitionName: string
 ) {
-	let animations: TransitionDirectionalAnimations | null = null;
-	switch (animationName) {
-		case 'fade': {
-			animations = fade();
-			break;
-		}
-		case 'slide': {
-			animations = slide();
-			break;
-		}
-		default: {
-			if (typeof animationName === 'object') {
-				animations = animationName;
-			}
-		}
-	}
-
+	// Default to crossfade (similar to `initial`, but snappier)
+	if (!animationName) animationName = 'crossfade';
 	const scope = createTransitionScope(result, hash);
-
-	// Default transition name is the scope of the element, ie HASH-1
-	if (!transitionName) {
-		transitionName = scope;
+	const viewTransitionName = transitionName ? toValidIdent(transitionName) : scope;
+	const styles = [
+		`[data-astro-transition-scope="${scope}"] { view-transition-name: ${viewTransitionName}; }`,
+	]
+	if (animationName === 'fade' || animationName === 'slide' || animationName === 'crossfade') {
+		styles.push(generateAnimationStyle(scope, viewTransitionName, BUILTIN_TRANSITION_ANIMATIONS[animationName]()))
+	} else if (animationName === 'none') {
+		styles.push(generateAnimationNone(scope, viewTransitionName))
+	} else if (typeof animationName === 'object') {
+		styles.push(generateAnimationStyle(scope, viewTransitionName, animationName))
 	}
+	result._metadata.extraHead.push(markHTMLString(`<style>${styles.join('')}</style>`));
 
-	const styles = markHTMLString(`<style>[data-astro-transition-scope="${scope}"] {
-	view-transition-name: ${transitionName};
+	return scope;
+}
+
+function generateAnimationNone(scope: string, viewTransitionName: string) {
+	const oldSelectors = [
+		`::view-transition-old(${viewTransitionName})`,
+		`[data-astro-transition-fallback=old] [data-astro-transition-scope="${scope}"]`,
+	]
+	const newSelectors = [
+		`::view-transition-new(${viewTransitionName})`,
+		`[data-astro-transition-fallback=new] [data-astro-transition-scope="${scope}"]`,
+	]
+	return [
+		`${oldSelectors.join(', ')} { animation: none; opacity: 0; mix-blend-mode: normal; }`,
+		`${newSelectors.join(', ')} { animation: none; mix-blend-mode: normal; }`,
+	].join('')
 }
-	${
-		!animations
-			? ``
-			: // Regular animations
-			  `
-::view-transition-old(${transitionName}) {
+
+function generateAnimationStyle(scope: string, viewTransitionName: string, animations: TransitionDirectionalAnimations) {
+	return `::view-transition-old(${viewTransitionName}) {
 	${stringifyAnimation(animations.forwards.old)}
 }
 [data-astro-transition-fallback=old] [data-astro-transition-scope="${scope}"] {
 	${stringifyAnimation(animations.forwards.old)}
 }
-
-::view-transition-new(${transitionName}) {
+::view-transition-new(${viewTransitionName}) {
 	${stringifyAnimation(animations.forwards.new)}
 }
 [data-astro-transition-fallback=new] [data-astro-transition-scope="${scope}"] {
 	${stringifyAnimation(animations.forwards.new)}
 }
 
-[data-astro-transition=back]::view-transition-old(${transitionName}) {
+[data-astro-transition=back]::view-transition-old(${viewTransitionName}) {
 	${stringifyAnimation(animations.backwards.old)}
 }
 [data-astro-transition=back][data-astro-transition-fallback=old] [data-astro-transition-scope="${scope}"] {
 	${stringifyAnimation(animations.backwards.old)}
 }
 
-[data-astro-transition=back]::view-transition-new(${transitionName}) {
+[data-astro-transition=back]::view-transition-new(${viewTransitionName}) {
 	${stringifyAnimation(animations.backwards.new)}
 }
 [data-astro-transition=back][data-astro-transition-fallback=new] [data-astro-transition-scope="${scope}"] {
 	${stringifyAnimation(animations.backwards.new)}
-}
-	`.trim()
-	}
-	</style>`);
-
-	result._metadata.extraHead.push(styles);
-
-	return scope;
+}`;
 }
 
 type AnimationBuilder = {

diff --git a/packages/astro/src/transitions/index.ts b/packages/astro/src/transitions/index.ts
@@ -1,5 +1,10 @@
 import type { TransitionAnimationPair, TransitionDirectionalAnimations } from '../@types/astro';
 
+const EASE_IN_QUART = 'cubic-bezier(0.5, 0, 0.75, 0)';
+const EASE_OUT_QUART = 'cubic-bezier(0.25, 1, 0.5, 1)';
+const EASE_IN_OUT_QUART = 'cubic-bezier(0.76, 0, 0.24, 1)';
+const EASE_IN_OUT_QUINT = 'cubic-bezier(0.83, 0, 0.17, 1)';
+
 export function slide({
 	duration,
 }: {
@@ -11,28 +16,28 @@ export function slide({
 				{
 					name: 'astroFadeOut',
 					duration: duration ?? '90ms',
-					easing: 'cubic-bezier(0.4, 0, 1, 1)',
+					easing: EASE_OUT_QUART,
 					fillMode: 'both',
 				},
 				{
 					name: 'astroSlideToLeft',
-					duration: duration ?? '300ms',
-					easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+					duration: duration ?? '220ms',
+					easing: EASE_IN_OUT_QUART,
 					fillMode: 'both',
 				},
 			],
 			new: [
 				{
 					name: 'astroFadeIn',
 					duration: duration ?? '210ms',
-					easing: 'cubic-bezier(0, 0, 0.2, 1)',
-					delay: '90ms',
+					easing: EASE_IN_QUART,
+					delay: '30ms',
 					fillMode: 'both',
 				},
 				{
 					name: 'astroSlideFromRight',
-					duration: duration ?? '300ms',
-					easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+					duration: duration ?? '220ms',
+					easing: EASE_IN_OUT_QUART,
 					fillMode: 'both',
 				},
 			],
@@ -51,16 +56,42 @@ export function fade({
 } = {}): TransitionDirectionalAnimations {
 	const anim = {
 		old: {
-			name: 'astroFadeInOut',
-			duration: duration ?? '0.2s',
-			easing: 'linear',
-			fillMode: 'forwards',
+			name: 'astroFadeOut',
+			duration: duration ?? '150ms',
+			easing: EASE_OUT_QUART,
+			fillMode: 'both',
+		},
+		new: {
+			name: 'astroFadeIn',
+			duration: duration ?? '250ms',
+			easing: EASE_IN_QUART,
+			fillMode: 'both',
+		},
+	} satisfies TransitionAnimationPair;
+
+	return {
+		forwards: anim,
+		backwards: anim,
+	};
+}
+
+export function crossfade({
+	duration,
+}: {
+	duration?: string | number;
+} = {}): TransitionDirectionalAnimations {
+	const anim = {
+		old: {
+			name: 'astroFadeOut',
+			duration: duration ?? '180',
+			easing: EASE_IN_OUT_QUINT,
+			fillMode: 'both',
 		},
 		new: {
-			name: 'astroFadeInOut',
-			duration: duration ?? '0.3s',
-			easing: 'linear',
-			fillMode: 'backwards',
+			name: 'astroFadeIn',
+			duration: duration ?? '180',
+			easing: EASE_IN_OUT_QUINT,
+			fillMode: 'both',
 		},
 	} satisfies TransitionAnimationPair;
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml