fix(animations): remove non animatable overflow

Author: xidedix

projects/coreui-angular/src/lib/alert/alert.component.scss

@@ -1,3 +1,4 @@
 :host {
   display: block;
+  overflow: hidden;
 }

projects/coreui-angular/src/lib/alert/alert.component.ts

@@ -24,9 +24,9 @@ type AnimateType = ('hide' | 'show');
   exportAs: 'cAlert',
   animations: [
     trigger('fadeInOut', [
-      state('show', style({opacity: 1, height: '*', padding: '*', border: '*', margin: '*', overflow: 'hidden'})),
-      state('hide', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0, overflow: 'hidden'})),
-      state('void', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0, overflow: 'hidden'})),
+      state('show', style({opacity: 1, height: '*', padding: '*', border: '*', margin: '*'})),
+      state('hide', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0})),
+      state('void', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0})),
       transition('show => hide', [
         animate('.3s ease-out'),
       ]),

projects/coreui-angular/src/lib/collapse/collapse.animations.ts

@@ -1,17 +1,17 @@
 import { animation, animate, style } from '@angular/animations';
 
 export const expandAnimation = animation([
-  style({ height: 0, visibility: 'hidden', overflow: 'hidden', paddingTop: 0, paddingBottom: 0 }),
+  style({ height: 0, visibility: 'hidden', paddingTop: 0, paddingBottom: 0 }),
   animate('{{ time }} {{ easing }}', style({ height: '*', visibility: 'visible', paddingTop: '*', paddingBottom: '*', minHeight: '*' })
   ),
-  animate('{{ time }}', style({opacity: '*', overflow: '*'})),
+  animate('{{ time }}', style({opacity: '*'})),
 ]);
 
 export const collapseAnimation = animation([
-  style({ height: '*', visibility: 'visible', overflow: 'hidden', paddingTop: '*', paddingBottom: '*', minHeight: '*' }),
+  style({ height: '*', visibility: 'visible', paddingTop: '*', paddingBottom: '*', minHeight: '*' }),
   animate(
     '{{ time }} {{ easing }}',
-    style({ height: 0, visibility: 'hidden', opacity: 0, overflow: 'hidden', paddingTop: 0, paddingBottom: 0, minHeight: 0 })
+    style({ height: 0, visibility: 'hidden', opacity: 0, paddingTop: 0, paddingBottom: 0, minHeight: 0 })
   )
 ]);
 

projects/coreui-angular/src/lib/toast/toast/toast.component.ts

@@ -28,9 +28,9 @@ type AnimateType = ('hide' | 'show');
   exportAs: 'cToast',
   animations: [
     trigger('fadeInOut', [
-      state('show', style({opacity: 1, height: '*', padding: '*', border: '*', margin: '*', overflow: 'hidden'})),
-      state('hide', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0, overflow: 'hidden'})),
-      state('void', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0, overflow: 'hidden'})),
+      state('show', style({opacity: 1, height: '*', padding: '*', border: '*', margin: '*'})),
+      state('hide', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0})),
+      state('void', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0})),
       transition('show => hide', [
         animate('{{ time }} {{ easing }}'),
       ], {