fix(animations): allow child animations by default in our pre-canned …

…animations (#1016)
Teradata · Dec 8, 2017 · 94a9c64 · 94a9c64
1 parent a035946
commit 94a9c64
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 69 deletions.
diff --git a/src/platform/core/common/animations/bounce/bounce.animation.ts b/src/platform/core/common/animations/bounce/bounce.animation.ts
@@ -1,5 +1,6 @@
 
-import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, keyframes, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 /**
@@ -21,16 +22,21 @@ export function TdBounceAnimation(bounceOptions: IAnimationOptions = {}): Animat
     state('1',  style({
       transform: 'translate3d(0, 0, 0)',
     })),
-    transition('0 <=> 1', animate((bounceOptions.duration || 500) + 'ms ' + (bounceOptions.delay || 0) + 'ms', keyframes([
-        style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0}),
-        style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.2}),
-        style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.4}),
-        style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.43}),
-        style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.53}),
-        style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -15px, 0)', offset: .7}),
-        style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.8}),
-        style({transform: 'translate3d(0, -4px, 0)', offset: .9}),
-        style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 1.0}),
-    ]))),
+    transition('0 <=> 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((bounceOptions.duration || 500) + 'ms ' + (bounceOptions.delay || 0) + 'ms', keyframes([
+          style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0}),
+          style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.2}),
+          style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.4}),
+          style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.43}),
+          style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.53}),
+          style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -15px, 0)', offset: .7}),
+          style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.8}),
+          style({transform: 'translate3d(0, -4px, 0)', offset: .9}),
+          style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 1.0}),
+        ])),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/collapse/collapse.animation.ts b/src/platform/core/common/animations/collapse/collapse.animation.ts
@@ -1,4 +1,5 @@
-import { trigger, state, style, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 export interface ICollapseAnimation extends IAnimationOptions {
@@ -25,22 +26,26 @@ export function TdCollapseAnimation(collapseOptions: ICollapseAnimation = {}): A
     state('1', style({
       height: '0',
       display: 'none',
-      overflow: 'hidden',
     })),
     state('0',  style({
       height: AUTO_STYLE,
       display: AUTO_STYLE,
-      overflow: 'hidden',
     })),
     transition('0 => 1', [
-      animate((collapseOptions.duration || 150) + 'ms ' +
-              (collapseOptions.delay || 0) + 'ms ' +
-              (collapseOptions.easeOnClose || 'ease-in')),
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((collapseOptions.duration || 150) + 'ms ' +
+                (collapseOptions.delay || 0) + 'ms ' +
+                (collapseOptions.easeOnClose || 'ease-in')),
+      ]),
     ]),
     transition('1 => 0', [
-      animate((collapseOptions.duration || 150) + 'ms ' +
-              (collapseOptions.delay || 0) + 'ms ' +
-              (collapseOptions.easeOnOpen || 'ease-out')),
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((collapseOptions.duration || 150) + 'ms ' +
+                (collapseOptions.delay || 0) + 'ms ' +
+                (collapseOptions.easeOnOpen || 'ease-out')),
+      ]),
     ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/fade/fadeInOut.animation.ts b/src/platform/core/common/animations/fade/fadeInOut.animation.ts
@@ -1,4 +1,5 @@
-import { trigger, state, style, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group  } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 export interface IFadeInOutAnimation extends IAnimationOptions {
@@ -30,13 +31,21 @@ export function TdFadeInOutAnimation(fadeInOut: IFadeInOutAnimation = {}): Anima
       opacity: AUTO_STYLE,
       display: AUTO_STYLE,
     })),
-    transition('0 => 1',
-      animate((fadeInOut.duration || 150) + 'ms ' +
-              (fadeInOut.delay || 0) + 'ms ' +
-              (fadeInOut.easeOnIn || 'ease-in'))),
-    transition('1 => 0',
-      animate((fadeInOut.duration || 150) + 'ms ' +
-              (fadeInOut.delay || 0) + 'ms ' +
-              (fadeInOut.easeOnOut || 'ease-out'))),
+    transition('0 => 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((fadeInOut.duration || 150) + 'ms ' +
+                (fadeInOut.delay || 0) + 'ms ' +
+                (fadeInOut.easeOnIn || 'ease-in')),
+      ]),
+    ]),
+    transition('1 => 0', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((fadeInOut.duration || 150) + 'ms ' +
+                (fadeInOut.delay || 0) + 'ms ' +
+                (fadeInOut.easeOnOut || 'ease-out')),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/flash/flash.animation.ts b/src/platform/core/common/animations/flash/flash.animation.ts
@@ -1,5 +1,6 @@
 
-import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, keyframes, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 /**
@@ -21,12 +22,17 @@ export function TdFlashAnimation(flashOptions: IAnimationOptions = {}): Animatio
     state('1',  style({
       opacity: 1,
     })),
-    transition('0 <=> 1', animate((flashOptions.duration || 500) + 'ms ' + (flashOptions.delay || 0) + 'ms', keyframes([
-        style({opacity: 1, offset: 0}),
-        style({opacity: 0, offset: 0.25}),
-        style({opacity: 1, offset: 0.5}),
-        style({opacity: 0, offset: 0.75}),
-        style({opacity: 1, offset: 1.0}),
-    ]))),
+    transition('0 <=> 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((flashOptions.duration || 500) + 'ms ' + (flashOptions.delay || 0) + 'ms', keyframes([
+          style({opacity: 1, offset: 0}),
+          style({opacity: 0, offset: 0.25}),
+          style({opacity: 1, offset: 0.5}),
+          style({opacity: 0, offset: 0.75}),
+          style({opacity: 1, offset: 1.0}),
+        ])),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/headshake/headshake.animation.ts b/src/platform/core/common/animations/headshake/headshake.animation.ts
@@ -1,5 +1,6 @@
 
-import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, keyframes, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 /**
@@ -21,13 +22,18 @@ export function TdHeadshakeAnimation(headshakeOptions: IAnimationOptions = {}):
     state('1',  style({
       transform: 'translateX(0)',
     })),
-    transition('0 <=> 1', animate((headshakeOptions.duration || 500) + 'ms ' + (headshakeOptions.delay || 0) + 'ms', keyframes([
-        style({transform: 'translateX(0)', offset: 0}),
-        style({transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065}),
-        style({transform: 'translateX(5px) rotateY(7deg)', offset: 0.185}),
-        style({transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315}),
-        style({transform: 'translateX(2px) rotateY(3deg)', offset: 0.435}),
-        style({transform: 'translateX(0)', offset: 0.50}),
-    ]))),
+    transition('0 <=> 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((headshakeOptions.duration || 500) + 'ms ' + (headshakeOptions.delay || 0) + 'ms', keyframes([
+          style({transform: 'translateX(0)', offset: 0}),
+          style({transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065}),
+          style({transform: 'translateX(5px) rotateY(7deg)', offset: 0.185}),
+          style({transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315}),
+          style({transform: 'translateX(2px) rotateY(3deg)', offset: 0.435}),
+          style({transform: 'translateX(0)', offset: 0.50}),
+        ])),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/jello/jello.animation.ts b/src/platform/core/common/animations/jello/jello.animation.ts
@@ -1,5 +1,6 @@
 
-import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, keyframes, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 /**
@@ -21,16 +22,21 @@ export function TdJelloAnimation(jelloOptions: IAnimationOptions = {}): Animatio
     state('1',  style({
       transform: 'none',
     })),
-    transition('0 <=> 1', animate((jelloOptions.duration || 500) + 'ms ' + (jelloOptions.delay || 0) + 'ms', keyframes([
-        style({transform: 'none', offset: 0}),
-        style({transform: 'none', offset: 0.011}),
-        style({transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.222}),
-        style({transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333}),
-        style({transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444}),
-        style({transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555}),
-        style({transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666}),
-        style({transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777}),
-        style({transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888}),
-    ]))),
+    transition('0 <=> 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((jelloOptions.duration || 500) + 'ms ' + (jelloOptions.delay || 0) + 'ms', keyframes([
+          style({transform: 'none', offset: 0}),
+          style({transform: 'none', offset: 0.011}),
+          style({transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.222}),
+          style({transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333}),
+          style({transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444}),
+          style({transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555}),
+          style({transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666}),
+          style({transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777}),
+          style({transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888}),
+        ])),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/pulse/pulse.animation.ts b/src/platform/core/common/animations/pulse/pulse.animation.ts
@@ -1,5 +1,6 @@
 
-import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, keyframes, transition, animate,
+         AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 /**
@@ -21,10 +22,17 @@ export function TdPulseAnimation(pulseOptions: IAnimationOptions = {}): Animatio
     state('1',  style({
       transform: 'scale3d(1, 1, 1)',
     })),
-    transition('0 <=> 1', animate((pulseOptions.duration || 500) + 'ms ' + (pulseOptions.delay || 0) + 'ms', keyframes([
-        style({transform: 'scale3d(1, 1, 1)', offset: 0}),
-        style({transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5}),
-        style({transform: 'scale3d(1, 1, 1)', offset: 1.0}),
-    ]))),
+    transition('0 <=> 1', [
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((pulseOptions.duration || 500) + 'ms ' + (pulseOptions.delay || 0) + 'ms',
+          keyframes([
+            style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
+            style({ transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5 }),
+            style({ transform: 'scale3d(1, 1, 1)', offset: 1.0 }),
+          ]),
+        ),
+      ]),
+    ]),
   ]);
 }
diff --git a/src/platform/core/common/animations/rotate/rotate.animation.ts b/src/platform/core/common/animations/rotate/rotate.animation.ts
@@ -1,4 +1,4 @@
-import { trigger, state, style, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations';
+import { trigger, state, style, transition, animate, AnimationTriggerMetadata, AUTO_STYLE, query, animateChild, group } from '@angular/animations';
 import { IAnimationOptions } from '../common/interfaces';
 
 export interface IRotateAnimation extends IAnimationOptions {
@@ -29,9 +29,12 @@ export function TdRotateAnimation(rotateOptions: IRotateAnimation = {}): Animati
       transform: 'rotate(' + (rotateOptions.degrees || 180) + 'deg)',
     })),
     transition('0 <=> 1', [
-      animate((rotateOptions.duration || 250) + 'ms ' +
-              (rotateOptions.delay || 0) + 'ms ' +
-              (rotateOptions.ease || 'ease-in')),
+      group([
+        query('@*', animateChild(), { optional: true }),
+        animate((rotateOptions.duration || 250) + 'ms ' +
+          (rotateOptions.delay || 0) + 'ms ' +
+          (rotateOptions.ease || 'ease-in')),
+      ]),
     ]),
   ]);
 }