From 94a9c64c8156475af174f9e0c6ea6edf1b51b077 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 7 Dec 2017 16:38:39 -0800 Subject: [PATCH] fix(animations): allow child animations by default in our pre-canned animations (#1016) --- .../animations/bounce/bounce.animation.ts | 30 +++++++++++-------- .../animations/collapse/collapse.animation.ts | 23 ++++++++------ .../animations/fade/fadeInOut.animation.ts | 27 +++++++++++------ .../animations/flash/flash.animation.ts | 22 +++++++++----- .../headshake/headshake.animation.ts | 24 +++++++++------ .../animations/jello/jello.animation.ts | 30 +++++++++++-------- .../animations/pulse/pulse.animation.ts | 20 +++++++++---- .../animations/rotate/rotate.animation.ts | 11 ++++--- 8 files changed, 118 insertions(+), 69 deletions(-) diff --git a/src/platform/core/common/animations/bounce/bounce.animation.ts b/src/platform/core/common/animations/bounce/bounce.animation.ts index 56e97baac4..75119f6631 100644 --- 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 index 893fa0c56b..1e41f763e8 100644 --- 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 index 2dc495c6fe..eaa315fe78 100644 --- 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 index 6fa237aba5..4b96b37734 100644 --- 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 index ca5c0175d0..e438cd2f8d 100644 --- 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 index 9972a53b05..d037aaf159 100644 --- 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 index a6c204c3ff..3aafb26746 100644 --- 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 index 83b11ddfd0..f38f2caedb 100644 --- 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')), + ]), ]), ]); }