Removes morph animations when setting transition:animate=none (#10247)

* Removes morph animations when setting transition:animate=none * Apply suggestions from code review --------- Co-authored-by: Arsh <[email protected]>
withastro · Feb 27, 2024 · fb773c9 · fb773c9
1 parent 08cdd09
commit fb773c9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/.changeset/eight-shrimps-enjoy.md b/.changeset/eight-shrimps-enjoy.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes an issue where `<ViewTransitions transition:animate="none" />` still allowed the browser-native morph animation.
diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts
@@ -107,6 +107,7 @@ export function renderTransition(
 		sheet.addFallback('old', 'animation: none; mix-blend-mode: normal;');
 		sheet.addModern('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
 		sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;');
+		sheet.addModern('group', 'animation: none');
 	}
 
 	result._metadata.extraHead.push(markHTMLString(`<style>${sheet.toString()}</style>`));