Add subtle hidden-based event filter animation

contao/templates/frontend/event_filter.html.twig

@@ -37,6 +37,22 @@
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
+<style>
+    .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;
+    }
+
+    .event-filter-target-list > .event.is-filtered-out {
+        opacity: 0;
+        transform: translateY(6px);
+        pointer-events: none;
+    }
+</style>
+
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -114,6 +130,8 @@
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
 
+    const animationMs = 180;
+    let hideTimers = new WeakMap();
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
@@ -240,12 +258,34 @@
         }
     };
 
+    const clearHideTimer = (eventItem) => {
+        const timer = hideTimers.get(eventItem);
+
+        if (timer) {
+            window.clearTimeout(timer);
+            hideTimers.delete(eventItem);
+        }
+    };
+
     const showEvent = (eventItem) => {
+        clearHideTimer(eventItem);
         eventItem.hidden = false;
+
+        requestAnimationFrame(() => {
+            eventItem.classList.remove('is-filtered-out');
+        });
     };
 
     const hideEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        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 }) => {