Added support for animations

pakaKoni · Dec 5, 2017 · 843baa7 · 843baa7
1 parent 58a602b
commit 843baa7
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "ionic:serve": "ionic-app-scripts serve"
   },
   "dependencies": {
+    "@angular/animations": "^5.0.5",
     "@angular/common": "5.0.3",
     "@angular/compiler": "5.0.3",
     "@angular/compiler-cli": "5.0.3",
@@ -57,6 +58,7 @@
     "ionicons": "3.0.0",
     "rxjs": "5.5.2",
     "sw-toolbox": "3.6.0",
+    "web-animations-js": "^2.3.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { ErrorHandler, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 
@@ -31,6 +32,7 @@ import { ConsoleLoggerService } from '@services/log4ts/console-logger.service';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     // HttpModule,
     IonicModule.forRoot(BigTopApp, {}, {
       links: [

diff --git a/src/app/main.ts b/src/app/main.ts
@@ -1,5 +1,7 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+// import 'web-animations-js';
+
 import { AppModule } from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/pages/animations/animation.ts b/src/pages/animations/animation.ts
@@ -0,0 +1,76 @@
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+
+export const FLY_IN_OUT =
+  trigger('flyInOut', [
+      state('in', style({opacity: 1, transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({
+          opacity: 0,
+          transform: 'translateX(-100%)'
+        }),
+        animate('1s 400ms ease-in')
+      ]),
+      transition('* => void', [
+        animate('1s 400ms ease-out', style({
+          opacity: 0,
+          transform: 'translateX(100%)'
+        }))
+      ])
+    ]
+  );
+
+/*
+
+export const FLY_IN_OUT =
+  trigger('flyInOut', [
+    state('in', style({transform: 'translateX(0)'})),
+    transition('void => *', [
+      style({transform: 'translateX(-100%)'}),
+      animate('1s 400ms')
+    ]),
+    transition('* => void', [
+      animate('400ms', style({transform: 'translateX(100%)'}))
+    ])
+  ]
+);
+
+export const FLY_IN_OUT =
+  trigger('flyInOut', [
+    state('in', style({opacity: 1, transform: 'translateX(0)'})),
+    transition('void => *', [
+      style({
+        opacity: 0,
+        transform: 'translateX(-100%)'
+      }),
+      animate('1s 400ms ease-in')
+    ]),
+    transition('* => void', [
+      animate('1s 400ms ease-out', style({
+        opacity: 0,
+        transform: 'translateX(100%)'
+      }))
+    ])
+  ]
+);
+
+export const FLY_IN_OUT =
+  trigger('flyInOut', [
+    state('in', style({transform: 'translateX(0)'})),
+    transition('void => *', [
+      animate('1s 400ms', keyframes([
+        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
+        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
+        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
+      ]))
+    ]),
+    transition('* => void', [
+      animate('1s 400ms', keyframes([
+        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
+        style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
+        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
+      ]))
+    ])
+  ]
+);
+
+*/
diff --git a/src/pages/introduction/introduction.html b/src/pages/introduction/introduction.html
@@ -30,7 +30,7 @@
 
       <ion-row>
         <ion-col text-center>
-          <ion-icon name="ionic" style="zoom: 3.0;"></ion-icon>
+          <ion-icon [@flyInBottomSlow]="'in'" name="ionic" style="zoom: 3.0;"></ion-icon>
           <h1>Welcome to the <strong>Big Top</strong></h1>
         </ion-col>
       </ion-row>

diff --git a/src/pages/introduction/introduction.ts b/src/pages/introduction/introduction.ts
@@ -2,14 +2,28 @@ import { Component, ViewChild, OnInit } from '@angular/core';
 
 import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
 
+import { SignInPage } from '@pages/sign-in/sign-in';
+
 import { LoggerService } from '@services/log4ts/logger.service';
 
-import { SignInPage } from '@pages/sign-in/sign-in';
+// import {FLY_IN_OUT} from "@pages/animations/animation";
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 
 @IonicPage()
 @Component({
   selector: 'page-introduction',
-  templateUrl: 'introduction.html'
+  templateUrl: 'introduction.html',
+  animations: [
+
+    trigger('flyInBottomSlow', [
+      state('in', style({transform: 'translate3d(0, 0, 0)'})),
+      transition('void => *', [
+        style({transform: 'translate3d(0, 2000px, 0'}),
+        animate('1s ease-in-out')
+      ])
+    ])
+
+  ]
 })
 export class IntroductionPage implements OnInit {
 

diff --git a/src/pages/sign-in/sign-in.html b/src/pages/sign-in/sign-in.html
@@ -16,7 +16,7 @@
 
   <ion-row class="app-icon-container">
     <ion-col text-center>
-      <ion-icon name="ionic" class="app-icon-zoom"></ion-icon>
+      <ion-icon [@flyInBottomSlow]="'in'" name="ionic" class="app-icon-zoom"></ion-icon>
     </ion-col>
   </ion-row>
 
@@ -25,7 +25,7 @@
     <!--
     <ion-input doesn't support autofocus
     -->
-    <ion-item>
+    <ion-item [@flyInOutEmail]="'in'">
       <ion-label floating>
         Email
       </ion-label>
@@ -44,7 +44,7 @@
       Please enter a valid email.
     </div>
 
-    <ion-item>
+    <ion-item [@flyInOutPassword]="'in'">
       <ion-label floating>
         Password
       </ion-label>
@@ -67,15 +67,16 @@
 
     <ion-row class="sign-in-button-container">
       <ion-col text-center>
-        <button ion-button block color="secondary" [disabled]="!credentialsForm.valid" (click)="onSignIn()">
+        <button [@flyInOutSignIn]="'in'" ion-button block color="secondary"
+                [disabled]="!credentialsForm.valid" (click)="onSignIn()">
           Sign in
         </button>
       </ion-col>
     </ion-row>
 
     <ion-row>
       <ion-col text-center>
-        <button ion-button clear color="light" (click)="onForgotPassword()">
+        <button [@flyInOutForgotYourPassword]="'in'" ion-button clear color="light" (click)="onForgotPassword()">
           Forgot your password?
         </button>
       </ion-col>
@@ -84,7 +85,7 @@
     <ion-row>
       <div class="fab-container" style="padding-top: 80px;">
         <ion-fab left bottom>
-          <button ion-fab color="primary"><ion-icon name="log-in"></ion-icon></button>
+          <button [@flyInOutForgotYourPassword]="'in'" ion-fab color="primary"><ion-icon name="log-in"></ion-icon></button>
           <ion-fab-list side="right">
             <button ion-fab color="light"><ion-icon name="logo-facebook"></ion-icon></button>
             <button ion-fab color="light"><ion-icon name="logo-twitter"></ion-icon></button>
@@ -101,6 +102,9 @@
 
 <!--
 
+    <ion-item [@flyInOut]="emailState">
+    <ion-item [@flyInOut]="passwordState">
+
 <ion-input formControlName="email" type="email"></ion-input>
 <ion-input formControlName="password" type="password"></ion-input>
 

diff --git a/src/pages/sign-in/sign-in.ts b/src/pages/sign-in/sign-in.ts
@@ -9,10 +9,96 @@ import { regexValidators } from '@pages/validators/validator';
 
 import { LoggerService } from '@services/log4ts/logger.service';
 
+// import {FLY_IN_OUT} from "@pages/animations/animation";
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+
 @IonicPage()
 @Component({
   selector: 'page-sign-in',
-  templateUrl: './sign-in.html'
+  templateUrl: './sign-in.html',
+  animations: [
+
+    trigger('flyInBottomSlow', [
+      state('in', style({transform: 'translate3d(0, 0, 0)'})),
+      transition('void => *', [
+        style({transform: 'translate3d(0, 2000px, 0'}),
+        animate('4s ease-in-out')
+      ])
+    ]),
+
+    trigger('flyInOutEmail', [
+        state('in', style({opacity: 1, transform: 'translateX(0)'})),
+        transition('void => *', [
+          style({
+            opacity: 0,
+            transform: 'translateX(-100%)'
+          }),
+          animate('1s 200ms ease-in')
+        ]),
+        transition('* => void', [
+          animate('1s 200ms ease-out', style({
+            opacity: 0,
+            transform: 'translateX(100%)'
+          }))
+        ])
+      ]
+    ),
+
+    trigger('flyInOutPassword', [
+        state('in', style({opacity: 1, transform: 'translateX(0)'})),
+        transition('void => *', [
+          style({
+            opacity: 0,
+            transform: 'translateX(-100%)'
+          }),
+          animate('2s 200ms ease-in')
+        ]),
+        transition('* => void', [
+          animate('2s 200ms ease-out', style({
+            opacity: 0,
+            transform: 'translateX(100%)'
+          }))
+        ])
+      ]
+    ),
+
+    trigger('flyInOutSignIn', [
+        state('in', style({opacity: 1, transform: 'translateX(0)'})),
+        transition('void => *', [
+          style({
+            opacity: 0,
+            transform: 'translateX(-100%)'
+          }),
+          animate('3s 200ms ease-in')
+        ]),
+        transition('* => void', [
+          animate('3s 200ms ease-out', style({
+            opacity: 0,
+            transform: 'translateX(100%)'
+          }))
+        ])
+      ]
+    ),
+
+    trigger('flyInOutForgotYourPassword', [
+        state('in', style({opacity: 1, transform: 'translateX(0)'})),
+        transition('void => *', [
+          style({
+            opacity: 0,
+            transform: 'translateX(-100%)'
+          }),
+          animate('3s 200ms ease-in')
+        ]),
+        transition('* => void', [
+          animate('3s 200ms ease-out', style({
+            opacity: 0,
+            transform: 'translateX(100%)'
+          }))
+        ])
+      ]
+    )
+
+  ]
 })
 export class SignInPage {
 
@@ -22,6 +108,9 @@ export class SignInPage {
 
   // component = EventsPage;
 
+  public emailState: any = 'out';
+  public passwordState: any = 'in';
+
   constructor(public navCtrl: NavController,
               public navParams: NavParams,
               private formBuilder: FormBuilder,

diff --git a/src/theme/variables.scss b/src/theme/variables.scss
@@ -30,6 +30,18 @@ $colors: (
   dark:       #222
 );
 
+/*
+
+$colors: (
+  primary:    #408AF8,
+  secondary:  #3ECF8E,
+  danger:     #f53d3d,
+  light:      #F6F9FC,
+  dark:       #6772E5
+);
+
+*/
+
 // Shared Variables
 // --------------------------------------------------
 // To customize the look and feel of this app, you can override