feat(package): added animations to the mat-password-strength-info c…

…omponent
angular-material-extensions · Sep 6, 2018 · cff9fda · cff9fda
1 parent c60eb6a
commit cff9fda
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 21 deletions.
diff --git a/src/module/animations/index.ts b/src/module/animations/index.ts
@@ -0,0 +1,66 @@
+import {animate, animation, AnimationReferenceMetadata, keyframes, style} from '@angular/animations';
+
+export function flipIn(timing: number, rotateX: number, rotateY: number): AnimationReferenceMetadata {
+  const params = {timing: timing, delay: 0, rotateX, rotateY};
+
+  return animation(
+    [
+      style({'backface-visibility': 'visible'}),
+      animate(
+        '{{ timing }}s {{ delay }}s ease-in',
+        keyframes([
+          style({
+            opacity: 0,
+            transform:
+              'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 90deg)',
+            offset: 0,
+          }),
+          style({
+            opacity: 1,
+            transform:
+              'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -20deg)',
+            offset: 0.4,
+          }),
+          style({
+            transform:
+              'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 10deg)',
+            offset: 0.6,
+          }),
+          style({
+            transform:
+              'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -5deg)',
+            offset: 0.8,
+          }),
+          style({
+            transform: 'perspective(400px) rotate3d(0, 0, 0, 0)',
+            offset: 1,
+          }),
+        ])
+      ),
+    ],
+    {params}
+  );
+}
+
+export const flipInX = flipIn(1, 1, 0);
+export const flipInY = flipIn(1, 0, 1);
+
+export const shake = animation(
+  animate(
+    '{{ timing }}s {{ delay }}s',
+    keyframes([
+      style({ transform: 'translate3d(0, 0, 0)', offset: 0 }),
+      style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 }),
+      style({ transform: 'translate3d(10px, 0, 0)', offset: 0.2 }),
+      style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 }),
+      style({ transform: 'translate3d(10px, 0, 0)', offset: 0.4 }),
+      style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 }),
+      style({ transform: 'translate3d(10px, 0, 0)', offset: 0.6 }),
+      style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 }),
+      style({ transform: 'translate3d(10px, 0, 0)', offset: 0.8 }),
+      style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 }),
+      style({ transform: 'translate3d(0, 0, 0)', offset: 1 }),
+    ])
+  ),
+  { params: { timing: 1, delay: 0 } }
+);
diff --git a/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html b/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html
@@ -1,84 +1,84 @@
-<mat-card>
+<mat-card @list>
   <mat-card-content fxLayout="column" fxLayoutAlign="start">
 
-    <div class="info-row" *ngIf="passwordComponent.enableLowerCaseLetterRule">
-      <div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
+    <div class="info-row" @items *ngIf="passwordComponent.enableLowerCaseLetterRule">
+      <div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error" @flipY>
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>contains at least one lower character</p>
       </div>
     </div>
 
-    <div class="info-row" *ngIf="passwordComponent.enableUpperCaseLetterRule">
+    <div class="info-row" @items *ngIf="passwordComponent.enableUpperCaseLetterRule">
       <div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>contains at least one upper character</p>
       </div>
     </div>
 
-    <div class="info-row" *ngIf="passwordComponent.enableDigitRule">
+    <div class="info-row" @items *ngIf="passwordComponent.enableDigitRule">
       <div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>contains at least one digit character</p>
       </div>
     </div>
 
-    <div class="info-row" *ngIf="passwordComponent.enableSpecialCharRule">
+    <div class="info-row" @items *ngIf="passwordComponent.enableSpecialCharRule">
       <div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>contains at least one special character</p>
       </div>
     </div>
 
-    <div class="info-row" *ngIf="passwordComponent.enableLengthRule">
+    <div class="info-row" @items *ngIf="passwordComponent.enableLengthRule">
       <div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>contains at least {{passwordComponent.min}} characters</p>
       </div>
     </div>
 
-    <div *ngIf="enableScoreInfo" class="info-row">
+    <div *ngIf="enableScoreInfo" class="info-row" @items>
       <div *ngIf="passwordComponent.strength === 100; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
         <p>Password's strength = {{passwordComponent.strength}} %100</p>

diff --git a/src/module/component/mat-password-strength-info/mat-password-strength-info.component.ts b/src/module/component/mat-password-strength-info/mat-password-strength-info.component.ts
@@ -1,11 +1,45 @@
 import {Component, Input} from '@angular/core';
 import {MatPasswordStrengthComponent} from '../mat-password-strength/mat-password-strength.component';
+import {animate, animateChild, stagger, style, transition, trigger, useAnimation} from '@angular/animations';
+import {query} from '@angular/animations';
+import {flipInY, shake} from '../../animations';
 
 @Component({
   selector: 'mat-password-strength-info',
   exportAs: 'matPasswordStrengthInfo',
   templateUrl: './mat-password-strength-info.component.html',
-  styleUrls: ['./mat-password-strength-info.component.scss']
+  styleUrls: ['./mat-password-strength-info.component.scss'],
+  animations: [
+    // nice stagger effect when showing existing elements
+    trigger('list', [
+      transition(':enter', [
+        // child animation selector + stagger
+        query('@items',
+          stagger(300, animateChild())
+        )
+      ]),
+    ]),
+    trigger('items', [
+      // cubic-bezier for a tiny bouncing feel
+      transition(':enter', [
+        style({transform: 'scale(0.5)', opacity: 0}),
+        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({transform: 'scale(1)', opacity: 1}))
+      ]),
+      transition(':leave', [
+        style({transform: 'scale(1)', opacity: 1, height: '*'}),
+        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px'}))
+      ]),
+    ]),
+    trigger('positiveState', [
+      transition(':enter', useAnimation(flipInY)),
+      // transition(':leave', useAnimation(flipInY)),
+    ]),
+    trigger('negativeState', [
+      transition(':enter', useAnimation(shake)),
+    ]),
+  ],
 })
 export class MatPasswordStrengthInfoComponent {