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,7 +130,7 @@
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
 
-    const animationMs = 220;
+    const animationMs = 180;
     let hideTimers = new WeakMap();
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
@@ -332,7 +348,7 @@
             return;
         }
 
-        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        const visibleCount = events.filter((eventItem) => matches(eventItem, filterState)).length;
         let filterText = 'alle';
 
         if (filterState.type === 'tag' && tagSelect) {