Remove view transitions and restore hidden-only event filtering

contao/templates/frontend/event_filter.html.twig

@@ -37,69 +37,6 @@
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
-<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(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>
-
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -177,64 +114,9 @@
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
 
-    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 || prefersReducedMotion) {
-            mutation();
-            return;
-        }
-
-        if (activeViewTransition) {
-            mutation();
-            return;
-        }
-
-        try {
-            const transition = document.startViewTransition(() => {
-                isViewTransitionMutation = true;
-
-                try {
-                    mutation();
-                } finally {
-                    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;
@@ -358,51 +240,12 @@
         }
     };
 
-    const clearHideTimer = (eventItem) => {
+    const showEvent = (eventItem) => {
-        const timer = hideTimers.get(eventItem);
+        eventItem.hidden = false;
-
-        if (timer) {
-            window.clearTimeout(timer);
-            hideTimers.delete(eventItem);
-        }
     };
 
-    const showEvent = (eventItem, { immediateVisibility = false } = {}) => {
+    const hideEvent = (eventItem) => {
-        clearHideTimer(eventItem);
+        eventItem.hidden = true;
-
-        if (immediateVisibility) {
-            eventItem.hidden = false;
-            eventItem.classList.remove('is-filtered-out');
-            return;
-        }
-
-        if (eventItem.hidden) {
-            eventItem.hidden = false;
-        }
-
-        requestAnimationFrame(() => {
-            eventItem.classList.remove('is-filtered-out');
-        });
-    };
-
-    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(() => {
-            eventItem.hidden = true;
-
-            hideTimers.delete(eventItem);
-        }, animationMs);
-
-        hideTimers.set(eventItem, timer);
     };
 
     const setActiveControl = ({ type, value }) => {
@@ -490,26 +333,13 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
-        const immediateVisibility = shouldMutateVisibilityImmediately();
+        events.forEach((eventItem) => {
-        const shouldAnimateLayout = immediateVisibility && hasAppliedInitialFilter;
+            if (matches(eventItem, filterState)) {
-
+                showEvent(eventItem);
-        const mutateVisibility = () => {
+            } else {
-            events.forEach((eventItem) => {
+                hideEvent(eventItem);
-                if (matches(eventItem, filterState)) {
+            }
-                    showEvent(eventItem, { immediateVisibility });
+        });
-                } else {
-                    hideEvent(eventItem, { immediateVisibility });
-                }
-            });
-        };
-
-        if (shouldAnimateLayout) {
-            runWithLayoutTransition(mutateVisibility);
-        } else {
-            mutateVisibility();
-        }
-
-        hasAppliedInitialFilter = true;
 
         updateStatus(filterState);
         syncState(filterState);