Updated

Author: abritopach

src/assets/img/mobile.png

@@ -1,12 +1,38 @@
 <ion-header>
   <ion-navbar>
     <ion-title>
-      Ionic Blank
+      Ionic Angular4 Animations
     </ion-title>
   </ion-navbar>
 </ion-header>
 
 <ion-content padding [@colorChange]="currentColor">
-    <button ion-button (click)="changeColor()">Change background color</button>
-    <button ion-button (click)="changeSize()" [@sizeChange]='currentSize'>Change button size</button>
+
+    <ion-list no-lines>
+        <ion-item-divider color="light">Animation Background Color</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="changeColor()">Test</button>
+        </ion-item>
+        <!--
+        <ion-item-divider color="light">Change Button Size</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="changeSize()" [@sizeChange]='currentSize'>Test</button>
+        </ion-item>
+        -->
+        <ion-item-divider color="light">Animation Resize Button</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="resizeButton()" [@resize]='resize'>Test</button>
+        </ion-item>
+        <ion-item-divider color="light">Animation Shake Mobile Icon</ion-item-divider>
+        <ion-item>
+            <button ion-button (click)="shakeIcon()">Test</button>
+            <img src="assets/img/mobile.png" [@shake]='shake'>
+        </ion-item>
+    </ion-list>
+
+    <!--
+    <ion-row>
+        <img src="assets/img/mobile.png" [@scale]='scale'>
+    </ion-row>
+    -->
 </ion-content>

src/pages/home/home.html

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger, keyframes } from '@angular/animations';
 import { NavController } from 'ionic-angular';
 
 @Component({
@@ -26,17 +26,57 @@ import { NavController } from 'ionic-angular';
       state('pink', style({ background: 'pink' })),
       transition('* => pink', animate('3000ms'))
     ]),
+      /*
       trigger('sizeChange', [
           state('small', style({
               transform: 'scale(1)',
           })),
           state('large', style({
               transform: 'scale(1.2)',
           })),
-          transition('small <=> large', animate('300ms ease-in', style({
-              transform: 'translateY(40px)'
-          }))),
+          transition('small <=> large', animate('300ms ease-in', keyframes([
+              style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
+              style({opacity: 1, transform: 'translateY(35px)',  offset: 0.5}),
+              style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
+          ]))),
       ]),
+      */
+      trigger('resize', [
+          state('small', style({
+              transform: 'scale(1)',
+          })),
+          state('large', style({
+              transform: 'scale(1.3)',
+          })),
+          transition('small <=> large', animate('300ms ease-in-out')),
+      ]),
+      trigger('shake', [
+          state('start', style ({
+              perspective: '1000px'
+          })),
+          state('end', style ({
+              perspective: '1000px'
+          })),
+          transition('start <=> end', animate('5s cubic-bezier(.36,.07,.19,.97)', keyframes([
+              style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
+              style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
+              style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
+              style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
+              style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
+              style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
+              style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
+              style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
+              style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
+          ])))
+      ]),
+      /*
+      trigger('scale', [
+          transition('* <=> *', animate('1s ease-in-out', keyframes([
+              style({ transform: 'scale(0.5)' }),
+              style({ transform: 'scale(1)' })
+          ])))
+      ])
+      */
   ],
 })
 export class HomePage {
@@ -45,7 +85,13 @@ export class HomePage {
     private currentColor: string;
     colorArr: string[] = ['red', 'green', 'blue', 'yellow', 'orange', 'aqua', 'pink', 'white'];
 
-    private currentSize: string = 'small';
+    //private currentSize: string = 'small';
+
+    private shake: string = 'start';
+
+    private resize: string = 'small';
+
+    //private scale: string = 'scale';
 
     constructor(public navCtrl: NavController) {
 
@@ -62,8 +108,19 @@ export class HomePage {
         }
     }
 
+    /*
     changeSize() {
         this.currentSize = (this.currentSize === 'small' ? 'large' : 'small');
     }
+    */
+
+    resizeButton() {
+        this.resize = (this.resize === 'small' ? 'large' : 'small');
+    }
+
+    shakeIcon() {
+        console.log("shakeIcon");
+        this.shake = (this.shake === 'start' ? 'end' : 'start');
+    }
 
 }