Animation Entering and leaving

Author: abritopach

src/pages/home/home.html

@@ -31,6 +31,22 @@
             <button ion-button (click)="flickerIcon()">Test</button>
             <ion-badge item-end><img src="assets/img/eye.png" [@flicker]='flicker'></ion-badge>
         </ion-item>
+        <ion-item-divider color="light">Animation Entering and leaving heroes</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="addHeroe()">Add heroe</button>
+            <button ion-button (click)="removeHeroe()">Remove heroe</button>
+            <ul>
+                <li *ngFor="let hero of heroes" [@flyInOut]="'in'">{{hero}}</li>
+            </ul>
+        </ion-item>
+        <ion-item-divider color="light">Animation Automatic property calculation</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="addHeroe1()">Add heroe</button>
+            <button ion-button (click)="removeHeroe1()">Remove heroe</button>
+            <ul>
+                <li *ngFor="let hero of heroes1" [@shrinkOut]="'in'"> {{hero}}</li>
+            </ul>
+        </ion-item>
     </ion-list>
 
 </ion-content>

src/pages/home/home.scss

@@ -1,3 +1,22 @@
 page-home {
 
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  li {
+    display: block;
+    width: 120px;
+    line-height: 50px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    background-color: #eee;
+    border-radius: 4px;
+    margin: 10px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
 }

src/pages/home/home.ts

@@ -66,6 +66,23 @@ import { NavController } from 'ionic-angular';
               style({opacity: 0, offset: 0.5}),
               style({opacity: 1, offset: 1.0}),
           ])))
+      ]),
+      trigger('flyInOut', [
+          state('in', style({transform: 'translateX(0)'})),
+          transition('void => *', [
+              style({transform: 'translateX(-100%)'}),
+              animate(300)
+          ]),
+          transition('* => void', [
+              animate(300, style({transform: 'translateX(100%)'}))
+          ])
+      ]),
+      trigger('shrinkOut', [
+          state('in', style({height: '*'})),
+          transition('* => void', [
+              style({height: '*'}),
+              animate(250, style({height: 0}))
+          ])
       ])
   ],
 })
@@ -81,7 +98,27 @@ export class HomePage {
 
     private resize: string = 'small';
 
+    private heroes: any;
+    private heroes1: any;
+    private currentIndex: number = 0;
+
+    static ALL_HEROES = [
+    'Windstorm',
+    'RubberMan',
+    'Bombasto',
+    'Magneta',
+    'Dynama',
+    'Narco',
+    'Celeritas',
+    'Dr IQ',
+    'Magma',
+    'Tornado',
+    'Mr. Nice'
+    ];
+
     constructor(public navCtrl: NavController) {
+        this.heroes = [];
+        this.heroes1 = [];
 
     }
 
@@ -108,4 +145,32 @@ export class HomePage {
         this.flicker = (this.flicker === 'start' ? 'end' : 'start');
     }
 
+    addHeroe() {
+        if (this.currentIndex <= HomePage.ALL_HEROES.length - 1) {
+            this.heroes.push(HomePage.ALL_HEROES[this.currentIndex]);
+            this.currentIndex += 1;
+        }
+        else this.currentIndex = 0;
+    }
+
+    removeHeroe() {
+        if (this.heroes.length > 0) {
+            this.heroes.splice(this.heroes.length - 1, 1);
+        }
+    }
+
+    addHeroe1() {
+        if (this.currentIndex <= HomePage.ALL_HEROES.length - 1) {
+            this.heroes1.push(HomePage.ALL_HEROES[this.currentIndex]);
+            this.currentIndex += 1;
+        }
+        else this.currentIndex = 0;
+    }
+
+    removeHeroe1() {
+        if (this.heroes1.length > 0) {
+            this.heroes1.splice(this.heroes1.length - 1, 1);
+        }
+    }
+
 }