Add subtle hidden-based event filter animation

contao/templates/frontend/event_filter.html.twig

@@ -38,17 +38,18 @@
 </div>
 
 <style>
-    .event-filter-target-list {
-        view-transition-name: event-filter-list;
+    .event-filter-target-list > .event {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 180ms ease, transform 180ms ease;
+        transition-behavior: allow-discrete;
+        will-change: opacity, transform;
     }
 
-    @media (prefers-reduced-motion: no-preference) {
-        ::view-transition-group(event-filter-list),
-        ::view-transition-old(event-filter-list),
-        ::view-transition-new(event-filter-list) {
-            animation-duration: 240ms;
-            animation-timing-function: ease;
-        }
+    .event-filter-target-list > .event.is-filtered-out {
+        opacity: 0;
+        transform: translateY(6px);
+        pointer-events: none;
     }
 </style>
 
@@ -129,34 +130,11 @@
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
 
-    const animationMs = 220;
+    const animationMs = 180;
     let hideTimers = new WeakMap();
-    const supportsViewTransitions = typeof document.startViewTransition === 'function';
-    let isViewTransitionMutation = false;
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
-    const runWithLayoutTransition = (mutation) => {
-        if (!supportsViewTransitions) {
-            mutation();
-            return;
-        }
-
-        try {
-            document.startViewTransition(() => {
-                isViewTransitionMutation = true;
-
-                try {
-                    mutation();
-                } finally {
-                    isViewTransitionMutation = false;
-                }
-            });
-        } catch (error) {
-            mutation();
-        }
-    };
-
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -291,16 +269,7 @@
 
     const showEvent = (eventItem) => {
         clearHideTimer(eventItem);
-
-        if (eventItem.hidden) {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
-                runWithLayoutTransition(() => {
-                    eventItem.hidden = false;
-                });
-            } else {
-                eventItem.hidden = false;
-            }
-        }
+        eventItem.hidden = false;
 
         requestAnimationFrame(() => {
             eventItem.classList.remove('is-filtered-out');
@@ -312,14 +281,7 @@
         eventItem.classList.add('is-filtered-out');
 
         const timer = window.setTimeout(() => {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
-                runWithLayoutTransition(() => {
-                    eventItem.hidden = true;
-                });
-            } else {
-                eventItem.hidden = true;
-            }
-
+            eventItem.hidden = true;
             hideTimers.delete(eventItem);
         }, animationMs);
 
@@ -411,14 +373,12 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
-        runWithLayoutTransition(() => {
-            events.forEach((eventItem) => {
-                if (matches(eventItem, filterState)) {
-                    showEvent(eventItem);
-                } else {
-                    hideEvent(eventItem);
-                }
-            });
+        events.forEach((eventItem) => {
+            if (matches(eventItem, filterState)) {
+                showEvent(eventItem);
+            } else {
+                hideEvent(eventItem);
+            }
         });
 
         updateStatus(filterState);