From 546018b7c3cdb75244b7994593817ffe17336386 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 10:24:40 +0430
Subject: [PATCH 1/8] Animation Triggers and States

+ installing bootstrap on the project
---
 angular.json               |  1 +
 package-lock.json          |  5 +++++
 package.json               |  1 +
 src/app/app.component.html |  5 +++--
 src/app/app.component.ts   | 34 +++++++++++++++++++++++++++++++++-
 5 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/angular.json b/angular.json
index df7bd8e..0575b82 100644
--- a/angular.json
+++ b/angular.json
@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": []
diff --git a/package-lock.json b/package-lock.json
index 209d370..5771864 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2500,6 +2500,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
+      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 4d76b5b..0682563 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~9.1.7",
     "@angular/platform-browser-dynamic": "~9.1.7",
     "@angular/router": "~9.1.7",
+    "bootstrap": "^3.3.7",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a8171e4..8c6a57f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,10 +2,11 @@
   <div class="row">
     <div class="col-xs-12">
       <h1>Animations</h1>
-      <button class="btn btn-primary">Animate!</button>
+      <button class="btn btn-primary" (click)="onAnimate()">Animate!</button>
       <button class="btn btn-primary">Shrink!</button>
       <hr>
-      <div></div>
+      <!-- This is the way of add a trigger to DOM -->
+      <div [@divState]="state" style="width: 100px; height: 100px;"></div>
     </div>
   </div>
   <hr>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 04039e7..637c748 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,45 @@
 import { Component } from '@angular/core';
+import { trigger, state, style } from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  /**
+   * Animations are just typescript codes with some features.
+   * 
+   * `trigger`: Each animation has a `tirgger()`. With this, we can tell 
+   * angular to trigger an animaion with an special name.
+   * 
+   * `state`: We transition between two situations with `state()`.
+   * 
+   * `style`: In this method, we can bind css styles of state.
+   */
+  animations: [
+    trigger('divState', [
+      state('normal', style({
+        'background-color': 'red',
+        'transform': 'translateX(0)'
+      })),
+      state('highlighted', style({
+        backgroundColor: 'blue',
+        transform: 'translateX(100px)'
+      }))
+    ])
+  ]
 })
 export class AppComponent {
+  /**
+   * This is a condition to control the animation.  
+   */ 
+  state: string = 'normal';
+
   list = ['Milk', 'Sugar', 'Bread'];
 
+  onAnimate() {
+    this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
+  }
+
   onAdd(item) {
     this.list.push(item);
   }

From 0b4b5ba9a3747d107e6fe7fb9b266df4543b2796 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 10:31:17 +0430
Subject: [PATCH 2/8] Transitions

---
 src/app/app.component.ts | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 637c748..89f8df2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,19 +1,12 @@
 import { Component } from '@angular/core';
-import { trigger, state, style } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * Animations are just typescript codes with some features.
-   * 
-   * `trigger`: Each animation has a `tirgger()`. With this, we can tell 
-   * angular to trigger an animaion with an special name.
-   * 
-   * `state`: We transition between two situations with `state()`.
-   * 
-   * `style`: In this method, we can bind css styles of state.
+   * `transition`: Describes how to transition from one state to other.
    */
   animations: [
     trigger('divState', [
@@ -24,16 +17,14 @@ import { trigger, state, style } from '@angular/animations';
       state('highlighted', style({
         backgroundColor: 'blue',
         transform: 'translateX(100px)'
-      }))
+      })),
+      transition('normal => highlighted', animate(300)),
+      transition('highlighted => normal', animate(500))
     ])
   ]
 })
 export class AppComponent {
-  /**
-   * This is a condition to control the animation.  
-   */ 
   state: string = 'normal';
-
   list = ['Milk', 'Sugar', 'Bread'];
 
   onAnimate() {

From 54814fb46d8d5c57e8b79dc4bf8d4c7accc536d9 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 11:13:56 +0430
Subject: [PATCH 3/8] Advanced Transition

---
 src/app/app.component.html |  5 +++--
 src/app/app.component.ts   | 35 +++++++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8c6a57f..aa9e272 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,10 +3,11 @@
     <div class="col-xs-12">
       <h1>Animations</h1>
       <button class="btn btn-primary" (click)="onAnimate()">Animate!</button>
-      <button class="btn btn-primary">Shrink!</button>
+      <button class="btn btn-primary" (click)="onShrink()">Shrink!</button>
       <hr>
-      <!-- This is the way of add a trigger to DOM -->
       <div [@divState]="state" style="width: 100px; height: 100px;"></div>
+      <br>
+      <div [@wildState]="wildState" style="width: 100px; height: 100px;"></div>
     </div>
   </div>
   <hr>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 89f8df2..d1d56bc 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,11 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * `transition`: Describes how to transition from one state to other.
+   * Note: transition('normal <=> highlighted', animate(300)):
+   * Is the other way of using transition.
+   * 
+   * Note: transition('shrunken <=> *', animate(400)) :
+   * It means 'from any state to shruken' or 'from shrunken to any state'.
    */
   animations: [
     trigger('divState', [
@@ -15,20 +19,43 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
         'transform': 'translateX(0)'
       })),
       state('highlighted', style({
-        backgroundColor: 'blue',
-        transform: 'translateX(100px)'
+        'background-color': 'blue',
+        'transform': 'translateX(100px)'
       })),
       transition('normal => highlighted', animate(300)),
-      transition('highlighted => normal', animate(500))
+      transition('highlighted => normal', animate(300)),
+    ]),
+    trigger('wildState', [
+      state('normal', style({
+        'background-color': 'red',
+        'transform': 'translateX(0) scale(1)'
+      })),
+      state('highlighted', style({
+        'background-color': 'blue',
+        'transform': 'translateX(100px) scale(1)'
+      })),
+      state('shrunken', style({
+        'background-color': 'green',
+        'transform': 'translateX(0) scale(0.5)'
+      })),
+      transition('normal => highlighted', animate(300)),
+      transition('highlighted => normal', animate(500)),
+      transition('shrunken <=> *', animate(600)),
     ])
   ]
 })
 export class AppComponent {
   state: string = 'normal';
+  wildState: string = 'normal';
   list = ['Milk', 'Sugar', 'Bread'];
 
   onAnimate() {
     this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
+    this.wildState === 'normal' ? this.wildState = 'highlighted' : this.wildState = 'normal';
+  }
+
+  onShrink() {
+    this.wildState = 'shrunken';
   }
 
   onAdd(item) {

From 4a3e30d1dfee0b734f6faad7f2a26eedd2821d87 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 11:36:45 +0430
Subject: [PATCH 4/8] Transition Phases

---
 src/app/app.component.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d1d56bc..8450233 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,11 +6,8 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * Note: transition('normal <=> highlighted', animate(300)):
-   * Is the other way of using transition.
-   * 
-   * Note: transition('shrunken <=> *', animate(400)) :
-   * It means 'from any state to shruken' or 'from shrunken to any state'.
+   * We can use set different phases for the `animate` method that will 
+   * runs seriative.
    */
   animations: [
     trigger('divState', [
@@ -40,7 +37,15 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
       })),
       transition('normal => highlighted', animate(300)),
       transition('highlighted => normal', animate(500)),
-      transition('shrunken <=> *', animate(600)),
+      transition('shrunken <=> *', [
+        style({
+          'background-color': 'orange'
+        }),
+        animate(200, style({
+          'border-radius': '50px'
+        })),
+        animate(500)
+      ]),
     ])
   ]
 })

From 53debdae34ca781a9ad884e9cf208bdcc9078858 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 14:58:11 +0430
Subject: [PATCH 5/8] Void State

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 37 ++++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index aa9e272..2092f26 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,7 +17,7 @@ <h1>Animations</h1>
       <button class="btn btn-primary" (click)="onAdd(input.value)">Add Item!</button>
       <hr>
       <ul class="list-group">
-        <li class="list-group-item" *ngFor="let item of list">{{ item }}</li>
+        <li class="list-group-item" *ngFor="let item of list" (click)="onDelete(item)" [@list1]>{{ item }}</li>
       </ul>
     </div>
   </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8450233..ab6705b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,8 +6,16 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * We can use set different phases for the `animate` method that will 
-   * runs seriative.
+   * `void`: Is a reserved state. It use to transition from an unattached 
+   * DOM situation (non-state) to an state.
+   * 
+   * Note: We manage 'from non existance to any state' with this:
+   * 'void => *'
+   * 
+   * Note: Example of animation lifecycle:
+   * in `list1` trigger, we have a final state, but we want to have a 
+   * transition to the state. We should define this transition step by 
+   * step untill it's done (in animate, every style will run serialive).
    */
   animations: [
     trigger('divState', [
@@ -46,7 +54,26 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
         })),
         animate(500)
       ]),
-    ])
+    ]),
+    trigger('list1', [
+      state('in', style({
+        'opacity': 1,
+        'transform': 'translateX(0)'
+      })),
+      transition('void => *', [
+        style({
+          'opacity': 0,
+          'transform': 'translateX(-50px)'
+        }),
+        animate(300)
+      ]),
+      transition('* => void', [
+        animate(300, style({
+          'transform': 'translateX(50px)',
+          'opacity': 0
+        }),)
+      ])
+    ]),
   ]
 })
 export class AppComponent {
@@ -66,4 +93,8 @@ export class AppComponent {
   onAdd(item) {
     this.list.push(item);
   }
+
+  onDelete(item) {
+    this.list.splice(this.list.indexOf(item), 1);
+  }
 }

From 08716e5cd0de8a2ced33096b8c79178a512b003c Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 15:11:21 +0430
Subject: [PATCH 6/8] Using Keyframes In Animations

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 44 +++++++++++++++++++++++++++-----------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2092f26..fad0be8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -25,7 +25,7 @@ <h1>Animations</h1>
   <div class="row">
     <div class="col-xs-12">
       <ul class="list-group">
-        <li class="list-group-item" *ngFor="let item of list">{{ item }}</li>
+        <li class="list-group-item" *ngFor="let item of list" [@list2]>{{ item }}</li>
       </ul>
     </div>
   </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ab6705b..4f65b83 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,21 +1,12 @@
 import { Component } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * `void`: Is a reserved state. It use to transition from an unattached 
-   * DOM situation (non-state) to an state.
-   * 
-   * Note: We manage 'from non existance to any state' with this:
-   * 'void => *'
-   * 
-   * Note: Example of animation lifecycle:
-   * in `list1` trigger, we have a final state, but we want to have a 
-   * transition to the state. We should define this transition step by 
-   * step untill it's done (in animate, every style will run serialive).
+   * Using `keyframes` method. They're used during transition.
    */
   animations: [
     trigger('divState', [
@@ -71,9 +62,38 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
         animate(300, style({
           'transform': 'translateX(50px)',
           'opacity': 0
-        }),)
+        }))
       ])
     ]),
+    trigger('list2', [
+      state('in', style({
+        'opacity': 1,
+        'transform': 'translateX(0)'
+      })),
+      transition('void => *', [
+        animate(1000, keyframes([
+          style({
+            'transform': 'translateX(-100px)',
+            'opacity': 0,
+            'offset': 0
+          }),
+          style({
+            'transform': 'translateX(-50px)',
+            'opacity': 0.5,
+            'offset': 0.3
+          }),
+          style({
+            'transform': 'translateX(-20px)',
+            'opacity': 1,
+            'offset': 0.8
+          }),
+          style({
+            'transform': 'translateX(0)',
+            'offset': 1
+          })
+        ]))
+      ]),
+    ])
   ]
 })
 export class AppComponent {

From 69d9d97ef5ba0ddf8d34717201145696d53f29e0 Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 15:21:03 +0430
Subject: [PATCH 7/8] Grouping Transitions

---
 src/app/app.component.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4f65b83..794f84d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import { trigger, state, style, transition, animate, keyframes, group } from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   /**
-   * Using `keyframes` method. They're used during transition.
+   * Using `group` method. We use this method when we have multiple  
+   * animations in same time but different duration.
    */
   animations: [
     trigger('divState', [
@@ -93,6 +94,17 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
           })
         ]))
       ]),
+      transition('* => void', [
+        group([
+          animate(300, style({
+            'color': 'red'
+          })),
+          animate(700, style({
+            'transform': 'translateX(50px)',
+            'opacity': 0
+          }))
+        ])
+      ])
     ])
   ]
 })

From 28467178faf59e00e93039b87201a41e42d6b4ea Mon Sep 17 00:00:00 2001
From: fffarzan <far.ned.me@gmail.com>
Date: Mon, 18 May 2020 15:31:15 +0430
Subject: [PATCH 8/8] Using Animation Callbacks

---
 src/app/app.component.html |  8 +++++++-
 src/app/app.component.ts   | 12 ++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index fad0be8..62e582c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,7 +5,13 @@ <h1>Animations</h1>
       <button class="btn btn-primary" (click)="onAnimate()">Animate!</button>
       <button class="btn btn-primary" (click)="onShrink()">Shrink!</button>
       <hr>
-      <div [@divState]="state" style="width: 100px; height: 100px;"></div>
+      <!-- 
+        Callbacks: Thery're used to run other code after starting or 
+        finishing an animation.
+
+        Callbacks used as see below
+       -->
+      <div [@divState]="state" (@divState.start)="animationStarted($event)" (@divState.done)="animationEnded($event)" style="width: 100px; height: 100px;"></div>
       <br>
       <div [@wildState]="wildState" style="width: 100px; height: 100px;"></div>
     </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 794f84d..9a775f6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,10 +5,6 @@ import { trigger, state, style, transition, animate, keyframes, group } from '@a
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  /**
-   * Using `group` method. We use this method when we have multiple  
-   * animations in same time but different duration.
-   */
   animations: [
     trigger('divState', [
       state('normal', style({
@@ -129,4 +125,12 @@ export class AppComponent {
   onDelete(item) {
     this.list.splice(this.list.indexOf(item), 1);
   }
+
+  animationStarted(event: Event) {
+    console.log(event);
+  }
+
+  animationEnded(event: Event) {
+    console.log(event);
+  }
 }