Scope view transitions to event list and prevent page shift

contao/templates/frontend/event_filter.html.twig

@@ -40,14 +40,62 @@
 <style>
     .event-filter-target-list {
         view-transition-name: event-filter-list;
+        contain: layout paint;
+    }
+
+    html {
+        scrollbar-gutter: stable both-edges;
+    }
+
+    body {
+        overflow-y: scroll;
+    }
+
+    @keyframes event-filter-vt-fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes event-filter-vt-fade-out {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
     }
 
     @media (prefers-reduced-motion: no-preference) {
-        ::view-transition-group(event-filter-list),
+        ::view-transition-group(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+            animation: none;
+        }
+
+        ::view-transition-group(event-filter-list) {
+            animation-duration: 240ms;
+            animation-timing-function: ease;
+        }
+
         ::view-transition-old(event-filter-list),
         ::view-transition-new(event-filter-list) {
             animation-duration: 240ms;
             animation-timing-function: ease;
+            mix-blend-mode: normal;
+        }
+
+        ::view-transition-old(event-filter-list) {
+            animation-name: event-filter-vt-fade-out;
+        }
+
+        ::view-transition-new(event-filter-list) {
+            animation-name: event-filter-vt-fade-in;
         }
     }
 </style>
@@ -132,18 +180,26 @@
     const animationMs = 220;
     let hideTimers = new WeakMap();
     const supportsViewTransitions = typeof document.startViewTransition === 'function';
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    let activeViewTransition = null;
     let isViewTransitionMutation = false;
+    let hasAppliedInitialFilter = false;
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
     const runWithLayoutTransition = (mutation) => {
-        if (!supportsViewTransitions) {
+        if (!supportsViewTransitions || prefersReducedMotion) {
+            mutation();
+            return;
+        }
+
+        if (activeViewTransition) {
             mutation();
             return;
         }
 
         try {
-            document.startViewTransition(() => {
+            const transition = document.startViewTransition(() => {
                 isViewTransitionMutation = true;
 
                 try {
@@ -152,11 +208,33 @@
                     isViewTransitionMutation = false;
                 }
             });
+
+            activeViewTransition = transition;
+
+            transition.ready.catch(() => {
+                // Can reject when the transition is skipped.
+            });
+
+            transition.updateCallbackDone.catch(() => {
+                // Keep skipped/aborted update callbacks from surfacing as uncaught.
+            });
+
+            transition.finished
+                .catch(() => {
+                    // Browsers can skip overlapping transitions; ignore these rejections.
+                })
+                .finally(() => {
+                    if (activeViewTransition === transition) {
+                        activeViewTransition = null;
+                    }
+                });
         } catch (error) {
             mutation();
         }
     };
 
+    const shouldMutateVisibilityImmediately = () => supportsViewTransitions && !prefersReducedMotion;
+
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -289,17 +367,17 @@
         }
     };
 
-    const showEvent = (eventItem) => {
+    const showEvent = (eventItem, { immediateVisibility = false } = {}) => {
         clearHideTimer(eventItem);
 
-        if (eventItem.hidden) {
+        if (immediateVisibility) {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
-                runWithLayoutTransition(() => {
-                    eventItem.hidden = false;
-                });
-            } else {
             eventItem.hidden = false;
+            eventItem.classList.remove('is-filtered-out');
+            return;
         }
+
+        if (eventItem.hidden) {
+            eventItem.hidden = false;
         }
 
         requestAnimationFrame(() => {
@@ -307,18 +385,19 @@
         });
     };
 
-    const hideEvent = (eventItem) => {
+    const hideEvent = (eventItem, { immediateVisibility = false } = {}) => {
         clearHideTimer(eventItem);
+
+        if (immediateVisibility) {
+            eventItem.classList.add('is-filtered-out');
+            eventItem.hidden = true;
+            return;
+        }
+
         eventItem.classList.add('is-filtered-out');
 
         const timer = window.setTimeout(() => {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
-                runWithLayoutTransition(() => {
             eventItem.hidden = true;
-                });
-            } else {
-                eventItem.hidden = true;
-            }
 
             hideTimers.delete(eventItem);
         }, animationMs);
@@ -411,15 +490,26 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
-        runWithLayoutTransition(() => {
+        const immediateVisibility = shouldMutateVisibilityImmediately();
+        const shouldAnimateLayout = immediateVisibility && hasAppliedInitialFilter;
+
+        const mutateVisibility = () => {
             events.forEach((eventItem) => {
                 if (matches(eventItem, filterState)) {
-                    showEvent(eventItem);
+                    showEvent(eventItem, { immediateVisibility });
                 } else {
-                    hideEvent(eventItem);
+                    hideEvent(eventItem, { immediateVisibility });
                 }
             });
-        });
+        };
+
+        if (shouldAnimateLayout) {
+            runWithLayoutTransition(mutateVisibility);
+        } else {
+            mutateVisibility();
+        }
+
+        hasAppliedInitialFilter = true;
 
         updateStatus(filterState);
         syncState(filterState);