feat(): All 'In' and 'Out' animations triggered only by state changes from false -> true

(Don't trigger In/Out animations when state changes from true -> false)

Author: filipows

README.md

@@ -78,7 +78,7 @@ and use them in the template:
 
 ### Animations with state or triggered by state changes
 
-These animations take as an input a boolean value. Some of animations, like Attention Seekers are triggered by any changes of the state, but others like `collapse` or `rotate` animations are displaying default state when the value is `falsy` and transition to end state when the value is `truthy`
+These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered by any changes of the state, all `in` and `out` animations are triggered by changes of state from `false` to `true`. Animations that preserve state, like `collapse` or `rotate` display default state when the value is `false` and transition to end state when the value is `true`
 
 ```ts
 import { collapseAnimation, rubberBandAnimation } from 'angular-animations';

demo-app/src/app/demo-dynamic-params/demo-dynamic-params.component.html

@@ -145,8 +145,8 @@ <h1 [@enter1]="{ value: '', params: { delay: 0 } }">
     <app-angular-img *ngSwitchCase="'rollIn'" [@rollIn]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate }}"></app-angular-img>
     <app-angular-img *ngSwitchCase="'rollOut'" [@rollOut]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate }}"></app-angular-img>
     <!-- Other -->
-    <app-angular-img *ngSwitchCase="'collapse'" [@collapse]="{ value: animationState, params: { duration: duration, delay: delay }}"></app-angular-img>
-    <app-angular-img *ngSwitchCase="'rotate'" [@rotate]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees }}"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'collapse'" [@collapse]="{ value: animationWithState, params: { duration: duration, delay: delay }}"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'rotate'" [@rotate]="{ value: animationWithState, params: { duration: duration, delay: delay, degrees: degrees }}"></app-angular-img>
     <app-angular-img *ngSwitchCase="'hueRotate'" [@hueRotate]="{ value: animationState, params: { duration: duration, delay: delay }}"></app-angular-img>
     <div *ngSwitchDefault>Select animaion</div>
   </div>

demo-app/src/app/demo-dynamic-params/demo-dynamic-params.component.ts

@@ -269,14 +269,19 @@ export class DemoDynamicParamsComponent implements OnInit {
   ];
   animation = 'pulse';
   animationState = false;
+  animationWithState = false;
 
   animate() {
-    this.animationState = !this.animationState;
+    this.animationState = false;
+    setTimeout(() => {
+      this.animationState = !this.animationState;
+      this.animationWithState = !this.animationWithState;
+    }, 1);
   }
 
   animationChanged() {
     this.setDefaultParams();
-    this.animateAfterChange();
+    this.animate();
   }
 
   setDefaultParams() {
@@ -412,12 +417,6 @@ export class DemoDynamicParamsComponent implements OnInit {
     }
   }
 
-  animateAfterChange() {
-    setTimeout(() => {
-      this.animate();
-    }, 1);
-  }
-
   ngOnInit() {
     this.setDefaultParams();
   }

demo-app/src/app/demo-main/demo-main.component.html

@@ -95,18 +95,18 @@ <h1 [@enter1]>
     <app-angular-img *ngSwitchCase="'rollIn'" [@rollIn]="animationState"></app-angular-img>
     <app-angular-img *ngSwitchCase="'rollOut'" [@rollOut]="animationState"></app-angular-img>
     <!-- Other -->
-    <app-angular-img *ngSwitchCase="'collapse'" [@collapse]="animationState"></app-angular-img>
-    <app-angular-img *ngSwitchCase="'rotate'" [@rotate]="animationState"></app-angular-img>
-    <app-angular-img *ngSwitchCase="'rotate90'" [@rotate90]="animationState"></app-angular-img>
-    <app-angular-img *ngSwitchCase="'rotate720'" [@rotate]="{value: animationState, params: { duration: 700, degrees: 720 } }"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'collapse'" [@collapse]="animationWithState"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'rotate'" [@rotate]="animationWithState"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'rotate90'" [@rotate90]="animationWithState"></app-angular-img>
+    <app-angular-img *ngSwitchCase="'rotate720'" [@rotate]="{value: animationWithState, params: { duration: 700, degrees: 720 } }"></app-angular-img>
     <app-angular-img *ngSwitchCase="'hueRotate'" [@hueRotate]="animationState"></app-angular-img>
     <div *ngSwitchDefault>Select animaion</div>
   </div>
 
 
   <div [@enter3] (@enter3.done)="animationState = !animationState">
     <mat-form-field appearance="outline">
-      <mat-select [(ngModel)]="animation" (ngModelChange)="animateAfterChange()">
+      <mat-select [(ngModel)]="animation" (ngModelChange)="animate()">
         <mat-optgroup *ngFor="let option of options" [label]="option.label">
           <mat-option *ngFor="let animation of option.animations" [value]="animation">{{animation}}</mat-option>
         </mat-optgroup>

demo-app/src/app/demo-main/demo-main.component.ts

@@ -261,15 +261,14 @@ export class DemoMainComponent {
   ];
   animation = 'rubberBand';
   animationState = false;
+  animationWithState = false;
   hueBtnState = false;
 
   animate() {
-    this.animationState = !this.animationState;
-  }
-
-  animateAfterChange() {
+    this.animationState = false;
     setTimeout(() => {
-      this.animate();
+      this.animationState = true;
+      this.animationWithState = !this.animationWithState;
     }, 1);
   }
 }

demo-app/src/app/experiments/experiments.component.html

@@ -3,7 +3,7 @@
     <app-angular-img *ngFor="let i of [0,1,2,3,4]" [@enter]="{value: '', params: { delay: i * 150 }}" (@enter.done)="hueState = !hueState"></app-angular-img>
   </div>
 
-  <button [@btnEnter] [@btnEnterFadeIn] mat-stroked-button color="primary" class="animate-btn" (click)="animationState = !animationState;">Animate
+  <button [@btnEnter] [@btnEnterFadeIn] mat-stroked-button color="primary" class="animate-btn" (click)="animate()">Animate
     letters</button>
 
   <div [@flash]="flashState">

demo-app/src/app/experiments/experiments.component.ts

@@ -50,5 +50,12 @@ export class ExperimentsComponent implements OnInit {
     }
   }
 
+  animate() {
+    this.animationState = false;
+    setTimeout(() => {
+      this.animationState = true;
+    }, 1);
+  }
+
   ngOnInit() {}
 }

lib/bouncing-entrances/bounce-in-down.animation.ts

@@ -51,7 +51,7 @@ const DEFAULT_DURATION = 1000;
 export function bounceInDownAnimation(options?: IBounceInDownAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'bounceInDown', [
     transition(
-      '0 <=> 1',
+      '0 => 1',
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/bouncing-entrances/bounce-in-left.animation.ts

@@ -51,7 +51,7 @@ const DEFAULT_DURATION = 1000;
 export function bounceInLeftAnimation(options?: IBounceInLeftAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'bounceInLeft', [
     transition(
-      '0 <=> 1',
+      '0 => 1',
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/bouncing-entrances/bounce-in-right.animation.ts

@@ -51,7 +51,7 @@ const DEFAULT_DURATION = 1000;
 export function bounceInRightAnimation(options?: IBounceInRightAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'bounceInRight', [
     transition(
-      '0 <=> 1',
+      '0 => 1',
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([