fixed search filter animation

src/app/+search-page/search-filters/search-filter/search-filter.component.html

 <div>
     <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right"
                                                                       [ngClass]="(isCollapsed() | async) ? 'fa-plus' : 'fa-minus'"></span></div>
-    <div @slide *ngIf="!(isCollapsed() | async)"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
+    <div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
         <ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
     </div>
 </div>
\ No newline at end of file

src/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -3,9 +3,8 @@
 
 :host {
     border: 1px solid map-get($theme-colors, light);
-    overflow: hidden;
-    .search-filter-wrapper:not(.closed) {
-        overflow: visible;
+    .search-filter-wrapper.closed {
+        overflow: hidden;
     }
     .filter-toggle {
         line-height: $line-height-base;

src/app/+search-page/search-filters/search-filter/search-filter.component.ts

@@ -89,7 +89,7 @@ export class SearchFilterComponent implements OnInit {
    * @param event The animation event
    */
   finishSlide(event: any): void {
-    if (event.fromState === 'void') {
+    if (event.fromState === 'collapsed') {
       this.collapsed = false;
     }
   }
@@ -99,7 +99,7 @@ export class SearchFilterComponent implements OnInit {
    * @param event The animation event
    */
   startSlide(event: any): void {
-    if (event.toState === 'void') {
+    if (event.toState === 'collapsed') {
       this.collapsed = true;
     }
   }

src/app/shared/animations/slide.ts

@@ -10,10 +10,13 @@ import {
 } from '@angular/animations';
 
 export const slide = trigger('slide', [
+  state('expanded', style({ height: '*' })),
+  state('collapsed', style({ height: 0 })),
   state('void', style({ height: 0 })),
   state('*', style({ height: '*' })),
   transition(':enter', [animate('200ms')]),
-  transition(':leave', [animate('200ms')])
+  transition(':leave', [animate('200ms')]),
+  transition('expanded <=> collapsed', animate(250))
 ]);
 
 export const slideHorizontal = trigger('slideHorizontal', [