A couple more updates for the animation demo

Author: sstorie

angular2-animated-notifications-panel/app/notification/notification.component.css

@@ -5,6 +5,7 @@
     justify-content: center;
     min-height: 0;
     min-width: 0;
+    max-height: 48px;
     padding: 8px;
 }
 

angular2-animated-notifications-panel/app/notification/notification.component.html

@@ -1,10 +1,10 @@
-<div class="icon" [ngSwitch]="notification.type">
+<div class="icon" @iconTrigger="expandedState" [ngSwitch]="notification.type">
     <i *ngSwitchCase="0" class="fa fa-comment"></i>
     <i *ngSwitchCase="1" class="fa fa-exclamation-triangle"></i>
     <i *ngSwitchCase="2" class="fa fa-code"></i>
     <i *ngSwitchCase="3" class="fa fa-credit-card"></i>
 </div>
-<div *ngIf="expanded" class="details">
+<div *ngIf="expanded" @detailsTrigger="'in'" class="details">
     <div class="message">
         <span>{{notification.message}}</span>
     </div>

angular2-animated-notifications-panel/app/notification/notification.component.js

@@ -13,9 +13,15 @@ var index_1 = require("../shared/index");
 var NotificationComponent = (function () {
     function NotificationComponent() {
         this.remove = new core_1.EventEmitter(false);
+        this.expandedState = 'collapsed';
         this.notificationTypes = index_1.NotificationType;
     }
     NotificationComponent.prototype.ngOnInit = function () { };
+    NotificationComponent.prototype.ngOnChanges = function (changes) {
+        if (changes["expanded"] !== undefined) {
+            this.expandedState = this.expanded ? 'expanded' : 'collapsed';
+        }
+    };
     __decorate([
         core_1.Input(), 
         __metadata('design:type', index_1.Notification)
@@ -33,7 +39,25 @@ var NotificationComponent = (function () {
             moduleId: module.id,
             selector: 'notification',
             templateUrl: 'notification.component.html',
-            styleUrls: ['notification.component.css']
+            styleUrls: ['notification.component.css'],
+            animations: [
+                core_1.trigger('detailsTrigger', [
+                    core_1.state('in', core_1.style({ opacity: '1' })),
+                    core_1.transition('void => *', [
+                        core_1.style({ opacity: '0' }),
+                        core_1.animate('200ms 300ms')
+                    ]),
+                    core_1.transition('* => void', [
+                        core_1.animate('200ms', core_1.style({ opacity: '0' }))
+                    ])
+                ]),
+                core_1.trigger('iconTrigger', [
+                    core_1.state('collapsed', core_1.style({ fontSize: '1.0em' })),
+                    core_1.state('expanded', core_1.style({ fontSize: '1.5em' })),
+                    core_1.transition('collapsed => expanded', core_1.animate('200ms ease-in')),
+                    core_1.transition('expanded => collapsed', core_1.animate('200ms ease-out'))
+                ])
+            ]
         }), 
         __metadata('design:paramtypes', [])
     ], NotificationComponent);

angular2-animated-notifications-panel/app/notification/notification.component.ts

@@ -1,22 +1,60 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    OnChanges,
+    SimpleChanges,
+    Input,
+    Output,
+    EventEmitter,
+    trigger,
+    state,
+    style,
+    transition,
+    animate
+} from '@angular/core';
 
 import {Notification, NotificationType} from "../shared/index";
 
 @Component({
     moduleId: module.id,
     selector: 'notification',
     templateUrl: 'notification.component.html',
-    styleUrls: ['notification.component.css']
+    styleUrls: ['notification.component.css'],
+    animations: [
+        trigger('detailsTrigger', [
+            state('in', style({ opacity: '1' })),
+            transition('void => *', [
+                style({ opacity: '0' }),
+                animate('200ms 300ms')
+            ]),
+            transition('* => void', [
+                animate('200ms', style({ opacity: '0' }))
+            ])
+        ]),
+        trigger('iconTrigger', [
+            state('collapsed', style({ fontSize: '1.0em' })),
+            state('expanded', style({ fontSize: '1.5em' })),
+            transition('collapsed => expanded', animate('200ms ease-in')),
+            transition('expanded => collapsed', animate('200ms ease-out'))
+        ])
+    ]
 })
-export class NotificationComponent implements OnInit {
+export class NotificationComponent implements OnInit, OnChanges {
     @Input() notification: Notification;
     @Input() expanded: boolean;
     @Output() remove = new EventEmitter<any>(false);
 
+    expandedState = 'collapsed';
+
     notificationTypes = NotificationType;
-    
+
     constructor() { }
 
     ngOnInit() { }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes["expanded"] !== undefined) {
+            this.expandedState = this.expanded ? 'expanded' : 'collapsed';
+        }
+    }
 }