feat(animations)

Updated animations to smoothly transition height.
Closes #196

CHANGELOG.md

@@ -11,6 +11,9 @@ Due to larger default viewports for standard mobile devices, the responsive layo
 and they have been removed.  The standard toast width is now fixed at 300px.
 Finally, the styles should be cleaner, more compact for large toasts, and more consistent across content size
 changes.
+* **animations:**  Animations have been rebuilt and enhanced to provide smoother transitions for all animation 
+types.  Thanks to @fidian for the excellent suggestion and examples.
+Closes [#196](https://github.com/Stabzs/Angular2-Toaster/issues/196).
 
 ### BREAKING CHANGES
 * **toast:** Due to the complexity of the `clickHandler` functionality potentially blocking the `tapToDismiss`
@@ -20,6 +23,8 @@ toast click, even if `tapToDismiss` is true or if the click originated from the
 * **toaster-container.component:** The toaster-container element has changed from an id to a class. Since multiple 
 containers can exist on the same page, using a class for controlling container styles is more semantically 
 appropriate.
+* **toaster.css:** IE support has been dropped and the styles have been ported to a much lighter-weight flexbox 
+pattern.  This will most likely break any custom toast styles.
 
 # 10.0.0
 ### FEATURES

src/angular2-toaster/src/lib/toaster-container.component.spec.ts

@@ -558,7 +558,7 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
         fixture.detectChanges();
 
         const closeButtonEle = fixture.nativeElement.querySelector('.toast-close-button');
-        expect(closeButtonEle.innerHTML).toBe('<button class="toast-close-button" type="button">×</button>');
+        expect(closeButtonEle.innerHTML).toBe('<span>×</span>');
     });
 
     it('addToast removes toast from top if !toasterconfig.newestOnTop and limit exceeded', () => {

src/angular2-toaster/src/lib/toaster-container.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, ChangeDetectorRef, OnInit, OnDestroy, NgZone } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Transitions } from './transitions';
 import { ToasterConfig } from './toaster-config';
 import { ToasterService} from './toaster.service';
 import { IClearWrapper } from './clearWrapper';
@@ -18,70 +18,12 @@ import { Toast } from './toast';
                     toasterconfig.typeClasses[toast.type] 
                 ]"
                 (click)="click(toast)" (clickEvent)="childClick($event)"
-                (mouseover)="stopTimer(toast)" (mouseout)="restartTimer(toast)">
+                (mouseover)="stopTimer(toast)" (mouseout)="restartTimer(toast)"
+            >
             </div>
         </div>
         `,
-    animations: [
-        trigger('toastState', [
-            state('flyRight, flyLeft, slideDown, slideUp, fade', style({ opacity: 1, transform: 'translate(0,0)' })),
-            transition('void => flyRight', [
-                style({
-                    opacity: 0, transform: 'translateX(100%)'
-                }),
-                animate('0.25s ease-in')
-            ]),
-            transition('flyRight => void', [
-                animate('0.25s 10ms ease-out', style({
-                    opacity: 0, transform: 'translateX(100%)'
-                }))
-            ]),
-            transition('void => flyLeft', [
-                style({
-                    opacity: 0, transform: 'translateX(-100%)'
-                }),
-                animate('0.25s ease-in')
-            ]),
-            transition('flyLeft => void', [
-                animate('0.25s 10ms ease-out', style({
-                    opacity: 0, transform: 'translateX(-100%)'
-                }))
-            ]),
-            transition('void => slideDown', [
-                style({
-                    opacity: 0, transform: 'translateY(-200%)'
-                }),
-                animate('0.3s ease-in')
-            ]),
-            transition('slideDown => void', [
-                animate('0.3s 10ms ease-out', style({
-                    opacity: 0, transform: 'translateY(200%)'
-                }))
-            ]),
-            transition('void => slideUp', [
-                style({
-                    opacity: 0, transform: 'translateY(200%)'
-                }),
-                animate('0.3s ease-in')
-            ]),
-            transition('slideUp => void', [
-                animate('0.3s 10ms ease-out', style({
-                    opacity: 0, transform: 'translateY(-200%)'
-                }))
-            ]),
-            transition('void => fade', [
-                style({
-                    opacity: 0,
-                }),
-                animate('0.3s ease-in')
-            ]),
-            transition('fade => void', [
-                animate('0.3s 10ms ease-out', style({
-                    opacity: 0,
-                }))
-            ])
-        ]),
-    ]
+    animations: Transitions
 })
 export class ToasterContainerComponent implements OnInit, OnDestroy {
     private addToastSubscriber: any;

src/angular2-toaster/src/lib/toaster.scss

@@ -88,7 +88,7 @@ $toaster-margin: 12px !default;
 
 .toast-close-button {
   align-self: flex-start;
-  padding: 2px 4px;
+  padding: 3px;
   font-size: 23px;
   line-height: 90%;
   font-weight: bold;

src/angular2-toaster/src/lib/transitions.ts

@@ -0,0 +1,139 @@
+import { 
+    trigger, state, style, animate, transition, group 
+} from '@angular/animations';
+
+export const Transitions = [
+    trigger('toastState', [
+        state('flyRight, flyLeft, slideDown, slideDown, slideUp, slideUp, fade', 
+            style({ opacity: 1, transform: 'translate(0,0)' })),
+        transition('void => flyRight', [
+            style({
+                opacity: 0,
+                transform: 'translateX(100%)',
+                height: 0
+            }),
+            animate('0.15s ease-in', style({
+                opacity: 1,
+                height: '*'
+            })),
+            animate('0.25s 15ms ease-in')
+        ]),
+        transition('flyRight => void', [
+            animate('0.25s ease-out', style({
+                opacity: 0,
+                transform: 'translateX(100%)'
+            })),
+            animate('0.15s ease-out', style({
+                height: 0
+            }))
+        ]),
+        transition('void => flyLeft', [
+            style({
+                opacity: 0, 
+                transform: 'translateX(-100%)',
+                height: 0
+            }),
+            animate('0.15s ease-in', style({
+                opacity: 1,
+                height: '*'
+            })),
+            animate('0.25s 15ms ease-in')
+        ]),
+        transition('flyLeft => void', [
+            animate('0.25s 10ms ease-out', style({
+                opacity: 0, 
+                transform: 'translateX(-100%)'
+            })),
+            animate('0.15s ease-out', style({
+                height: 0
+            }))
+        ]),
+        transition('void => slideDown', [
+            style({
+                opacity: 0, 
+                transform: 'translateY(-500%)',
+                height: 0
+            }),
+            group([
+                animate('0.2s ease-in', style({
+                    height: '*'
+                })),
+                animate('0.4s ease-in', style({
+                    transform: 'translate(0,0)'
+                })), 
+                animate('0.3s 0.1s ease-in', style({
+                    opacity: 1
+                }))
+            ])
+        ]),
+        transition('slideDown => void', group([
+            animate('0.3s ease-out', style({
+                opacity: 0
+            })),
+            animate('0.4s ease-out', style({
+                transform: 'translateY(-500%)'
+            })), 
+            animate('0.2s 0.2s ease-out', style({
+                height: 0
+            }))
+        ])),
+        transition('void => slideUp', [
+            style({
+                opacity: 0, 
+                transform: 'translateY(1000%)',
+                height: 0
+            }),
+            group([
+                animate('0.2s ease-in', style({
+                    height: '*'
+                })),
+                animate('0.5s ease-in', style({
+                    transform: 'translate(0,0)'
+                })), 
+                animate('0.3s 0.1s ease-in', style({
+                    opacity: 1
+                }))
+            ])
+        ]),
+        transition('slideUp => void', group([
+            animate('0.3s ease-out', style({
+                opacity: 0
+            })),
+            animate('0.5s ease-out', style({
+                transform: 'translateY(1000%)'
+            })), 
+            animate('0.3s 0.15s ease-out', style({
+                height: 0
+            }))
+        ])),
+        transition('void => fade', [
+            style({
+                opacity: 0,
+                height: 0
+            }),
+            animate('0.20s ease-in', style({
+                height: '*'
+            })),
+            animate('0.15s ease-in', style({
+                opacity: 1
+            }))
+
+        ]),
+        transition('fade => void', [
+            group([
+                animate('0.0s ease-out', style({
+                    // reposition the background to prevent
+                    // a ghost image during transition
+                    'background-position': '-99999px'
+                })),
+                animate('0.15s ease-out', style({
+                    opacity: 0,
+                    'background-image': ''
+                })),
+                animate('0.3s 20ms ease-out', style({
+                    height: 0
+                }))
+            ])
+        ])
+    ]),
+]

src/demo/src/app/app.component.ts

@@ -12,7 +12,7 @@ export class AppComponent {
   title = 'demo';
 
   appConfig: IToasterConfig = new ToasterConfig({
-    animation: 'fade', newestOnTop: false, positionClass: 'toast-top-right', 
+    animation: 'fade', newestOnTop: true, positionClass: 'toast-bottom-right', 
     toastContainerId: 1, timeout: 0, showCloseButton: true, 
     // titleClass: 'title-1'
   });
@@ -50,10 +50,10 @@ export class AppComponent {
   }
 
   toto() {
-    console.log('toto button clicked');
+    console.log('todo button clicked');
     const toast: Toast = {
       type: 'success',
-      body: 'I am toto toast'
+      body: 'I am todo toast'
     };
     this.toasterService.pop(toast);
   }