Fix event filter transition jank and restore layout animation

contao/templates/frontend/event_filter.html.twig

@@ -38,14 +38,9 @@
 </div>
 
 <style>
-    .event-filter-target-list {
-        view-transition-name: event-filter-list;
-    }
-
     @media (prefers-reduced-motion: no-preference) {
-        ::view-transition-group(event-filter-list),
+        ::view-transition-old(root),
-        ::view-transition-old(event-filter-list),
+        ::view-transition-new(root) {
-        ::view-transition-new(event-filter-list) {
             animation-duration: 240ms;
             animation-timing-function: ease;
         }
@@ -132,13 +127,14 @@
     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 currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
     const runWithLayoutTransition = (mutation) => {
-        if (!supportsViewTransitions) {
+        if (!supportsViewTransitions || prefersReducedMotion) {
             mutation();
             return;
         }
@@ -183,6 +179,8 @@
         }
     };
 
+    const shouldMutateVisibilityImmediately = () => supportsViewTransitions && !prefersReducedMotion;
+
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -315,9 +313,15 @@
         }
     };
 
-    const showEvent = (eventItem) => {
+    const showEvent = (eventItem, { immediateVisibility = false } = {}) => {
         clearHideTimer(eventItem);
 
+        if (immediateVisibility) {
+            eventItem.hidden = false;
+            eventItem.classList.remove('is-filtered-out');
+            return;
+        }
+
         if (eventItem.hidden) {
             eventItem.hidden = false;
         }
@@ -327,8 +331,15 @@
         });
     };
 
-    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(() => {
@@ -425,12 +436,14 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
+        const immediateVisibility = shouldMutateVisibilityImmediately();
+
         runWithLayoutTransition(() => {
             events.forEach((eventItem) => {
                 if (matches(eventItem, filterState)) {
-                    showEvent(eventItem);
+                    showEvent(eventItem, { immediateVisibility });
                 } else {
-                    hideEvent(eventItem);
+                    hideEvent(eventItem, { immediateVisibility });
                 }
             });
         });