Force visibility change to take effect by resetting animation's currentTime

Author: martrapp

.changeset/cold-bottles-end.md

@@ -0,0 +1,5 @@
+---
+'@vtbag/inspection-chamber': patch
+---
+
+Fixes an issue, where changing visibility of pseudo-elements did not work for cross-document view transitions.

src/index.ts

@@ -56,12 +56,15 @@ function initSpecimen() {
 		const rewrite = (cb?: ViewTransitionUpdateCallback) => async () => {
 			await Promise.resolve();
 			cb && (await cb());
+			top!.__vtbag.inspectionChamber!.crossDocument = false;
 			pageReveal();
 		};
 
 		if (CSS.supports('selector(:active-view-transition-type(x))')) {
 			// level 2 signature
-			frameDocument.startViewTransition = (obj?: ViewTransitionUpdateCallback | StartViewTransitionOptions) => {
+			frameDocument.startViewTransition = (
+				obj?: ViewTransitionUpdateCallback | StartViewTransitionOptions
+			) => {
 				const param: StartViewTransitionOptions = { types: undefined, update: undefined };
 				('@vtbag');
 				pageSwap();
@@ -99,6 +102,7 @@ function pageSwap() {
 function prePageReveal(e: Event) {
 	inspectionChamber.viewTransition =
 		('viewTransition' in e && (e.viewTransition as ViewTransition)) || undefined;
+	top!.__vtbag.inspectionChamber!.crossDocument = true;
 	pageReveal();
 }
 function pageReveal() {

src/styles.ts

@@ -11,6 +11,21 @@ export function setStyles(
 			prepend ? 'afterbegin' : 'beforeend',
 			`<style id="${id}">${styles}</style>`
 		);
+
+	if (top!.__vtbag.inspectionChamber!.crossDocument) {
+		const animations = doc.getAnimations();
+		const pivot = animations.find(
+			(a) => a.playState === 'paused' && a.effect?.pseudoElement?.startsWith('::view-transition')
+		);
+		if (pivot)
+			animations.forEach((a) => {
+				const now = a.currentTime;
+				a.currentTime === 0 ? a.currentTime++ : (a.currentTime as number)--;
+				requestAnimationFrame(() => {
+					a.currentTime = now;
+				});
+			});
+	}
 }
 
 export function addFrames(show: boolean, namedOnly: boolean) {

src/types.ts

@@ -12,6 +12,7 @@ export type InspectionChamber = {
 	mainPanel?: HTMLDivElement;
 	innerPanel?: HTMLDivElement;
 	pushBack?: HTMLDivElement | null;
+	crossDocument?: boolean;
 };
 
 declare global {