@ -9,7 +9,9 @@
|
||||
/**
|
||||
* Represents a set of CSS styles for use in an animation style.
|
||||
*/
|
||||
export interface ɵStyleData { [key: string]: string|number; }
|
||||
export interface ɵStyleData {
|
||||
[key: string]: string|number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents animation-step timing parameters for an animation step.
|
||||
@ -67,10 +69,10 @@ export declare interface AnimationOptions {
|
||||
*/
|
||||
delay?: number|string;
|
||||
/**
|
||||
* A set of developer-defined parameters that modify styling and timing
|
||||
* when an animation action starts. An array of key-value pairs, where the provided value
|
||||
* is used as a default.
|
||||
*/
|
||||
* A set of developer-defined parameters that modify styling and timing
|
||||
* when an animation action starts. An array of key-value pairs, where the provided value
|
||||
* is used as a default.
|
||||
*/
|
||||
params?: {[name: string]: any};
|
||||
}
|
||||
|
||||
@ -81,7 +83,9 @@ export declare interface AnimationOptions {
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
export declare interface AnimateChildOptions extends AnimationOptions { duration?: number|string; }
|
||||
export declare interface AnimateChildOptions extends AnimationOptions {
|
||||
duration?: number|string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Constants for the categories of parameters that can be defined for animations.
|
||||
@ -171,7 +175,9 @@ export const AUTO_STYLE = '*';
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
export interface AnimationMetadata { type: AnimationMetadataType; }
|
||||
export interface AnimationMetadata {
|
||||
type: AnimationMetadataType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contains an animation trigger. Instantiated and returned by the
|
||||
@ -181,8 +187,8 @@ export interface AnimationMetadata { type: AnimationMetadataType; }
|
||||
*/
|
||||
export interface AnimationTriggerMetadata extends AnimationMetadata {
|
||||
/**
|
||||
* The trigger name, used to associate it with an element. Unique within the component.
|
||||
*/
|
||||
* The trigger name, used to associate it with an element. Unique within the component.
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* An animation definition object, containing an array of state and transition declarations.
|
||||
@ -654,8 +660,9 @@ export function trigger(name: string, definitions: AnimationMetadata[]): Animati
|
||||
* @publicApi
|
||||
*/
|
||||
export function animate(
|
||||
timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata |
|
||||
null = null): AnimationAnimateMetadata {
|
||||
timings: string|number,
|
||||
styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null =
|
||||
null): AnimationAnimateMetadata {
|
||||
return {type: AnimationMetadataType.Animate, styles, timings};
|
||||
}
|
||||
|
||||
@ -693,7 +700,7 @@ export function animate(
|
||||
* @publicApi
|
||||
*/
|
||||
export function group(
|
||||
steps: AnimationMetadata[], options: AnimationOptions | null = null): AnimationGroupMetadata {
|
||||
steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationGroupMetadata {
|
||||
return {type: AnimationMetadataType.Group, steps, options};
|
||||
}
|
||||
|
||||
@ -721,7 +728,8 @@ export function group(
|
||||
* @usageNotes
|
||||
* When you pass an array of steps to a
|
||||
* `transition()` call, the steps run sequentially by default.
|
||||
* Compare this to the `{@link animations/group group()}` call, which runs animation steps in parallel.
|
||||
* Compare this to the `{@link animations/group group()}` call, which runs animation steps in
|
||||
*parallel.
|
||||
*
|
||||
* When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
|
||||
* execution continues to the next instruction only after each of the inner animation
|
||||
@ -729,8 +737,8 @@ export function group(
|
||||
*
|
||||
* @publicApi
|
||||
**/
|
||||
export function sequence(steps: AnimationMetadata[], options: AnimationOptions | null = null):
|
||||
AnimationSequenceMetadata {
|
||||
export function sequence(
|
||||
steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationSequenceMetadata {
|
||||
return {type: AnimationMetadataType.Sequence, steps, options};
|
||||
}
|
||||
|
||||
@ -773,9 +781,8 @@ export function sequence(steps: AnimationMetadata[], options: AnimationOptions |
|
||||
*
|
||||
* @publicApi
|
||||
**/
|
||||
export function style(
|
||||
tokens: '*' | {[key: string]: string | number} |
|
||||
Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {
|
||||
export function style(tokens: '*'|{[key: string]: string | number}|
|
||||
Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {
|
||||
return {type: AnimationMetadataType.Style, styles: tokens, offset: null};
|
||||
}
|
||||
|
||||
@ -1032,10 +1039,10 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
|
||||
* @publicApi
|
||||
**/
|
||||
export function transition(
|
||||
stateChangeExpr: string | ((fromState: string, toState: string, element?: any,
|
||||
params?: {[key: string]: any}) => boolean),
|
||||
steps: AnimationMetadata | AnimationMetadata[],
|
||||
options: AnimationOptions | null = null): AnimationTransitionMetadata {
|
||||
stateChangeExpr: string|
|
||||
((fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => boolean),
|
||||
steps: AnimationMetadata|AnimationMetadata[],
|
||||
options: AnimationOptions|null = null): AnimationTransitionMetadata {
|
||||
return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};
|
||||
}
|
||||
|
||||
@ -1085,8 +1092,8 @@ export function transition(
|
||||
* @publicApi
|
||||
*/
|
||||
export function animation(
|
||||
steps: AnimationMetadata | AnimationMetadata[],
|
||||
options: AnimationOptions | null = null): AnimationReferenceMetadata {
|
||||
steps: AnimationMetadata|AnimationMetadata[],
|
||||
options: AnimationOptions|null = null): AnimationReferenceMetadata {
|
||||
return {type: AnimationMetadataType.Reference, animation: steps, options};
|
||||
}
|
||||
|
||||
@ -1109,7 +1116,7 @@ export function animation(
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
export function animateChild(options: AnimateChildOptions | null = null):
|
||||
export function animateChild(options: AnimateChildOptions|null = null):
|
||||
AnimationAnimateChildMetadata {
|
||||
return {type: AnimationMetadataType.AnimateChild, options};
|
||||
}
|
||||
@ -1126,7 +1133,7 @@ export function animateChild(options: AnimateChildOptions | null = null):
|
||||
*/
|
||||
export function useAnimation(
|
||||
animation: AnimationReferenceMetadata,
|
||||
options: AnimationOptions | null = null): AnimationAnimateRefMetadata {
|
||||
options: AnimationOptions|null = null): AnimationAnimateRefMetadata {
|
||||
return {type: AnimationMetadataType.AnimateRef, animation, options};
|
||||
}
|
||||
|
||||
@ -1179,7 +1186,7 @@ export function useAnimation(
|
||||
* ### Usage Example
|
||||
*
|
||||
* The following example queries for inner elements and animates them
|
||||
* individually using `animate()`.
|
||||
* individually using `animate()`.
|
||||
*
|
||||
* ```typescript
|
||||
* @Component({
|
||||
@ -1218,8 +1225,8 @@ export function useAnimation(
|
||||
* @publicApi
|
||||
*/
|
||||
export function query(
|
||||
selector: string, animation: AnimationMetadata | AnimationMetadata[],
|
||||
options: AnimationQueryOptions | null = null): AnimationQueryMetadata {
|
||||
selector: string, animation: AnimationMetadata|AnimationMetadata[],
|
||||
options: AnimationQueryOptions|null = null): AnimationQueryMetadata {
|
||||
return {type: AnimationMetadataType.Query, selector, animation, options};
|
||||
}
|
||||
|
||||
@ -1303,8 +1310,7 @@ export function query(
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
export function stagger(
|
||||
timings: string | number,
|
||||
animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata {
|
||||
export function stagger(timings: string|number, animation: AnimationMetadata|AnimationMetadata[]):
|
||||
AnimationStaggerMetadata {
|
||||
return {type: AnimationMetadataType.Stagger, timings, animation};
|
||||
}
|
||||
|
@ -13,7 +13,7 @@
|
||||
*/
|
||||
export {AnimationBuilder, AnimationFactory} from './animation_builder';
|
||||
export {AnimationEvent} from './animation_event';
|
||||
export {AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';
|
||||
export {animate, animateChild, AnimateChildOptions, AnimateTimings, animation, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';
|
||||
export {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';
|
||||
|
||||
export * from './private_export';
|
||||
|
@ -69,9 +69,13 @@ export class AnimationGroupPlayer implements AnimationPlayer {
|
||||
}
|
||||
}
|
||||
|
||||
init(): void { this.players.forEach(player => player.init()); }
|
||||
init(): void {
|
||||
this.players.forEach(player => player.init());
|
||||
}
|
||||
|
||||
onStart(fn: () => void): void { this._onStartFns.push(fn); }
|
||||
onStart(fn: () => void): void {
|
||||
this._onStartFns.push(fn);
|
||||
}
|
||||
|
||||
private _onStart() {
|
||||
if (!this.hasStarted()) {
|
||||
@ -81,11 +85,17 @@ export class AnimationGroupPlayer implements AnimationPlayer {
|
||||
}
|
||||
}
|
||||
|
||||
onDone(fn: () => void): void { this._onDoneFns.push(fn); }
|
||||
onDone(fn: () => void): void {
|
||||
this._onDoneFns.push(fn);
|
||||
}
|
||||
|
||||
onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
|
||||
onDestroy(fn: () => void): void {
|
||||
this._onDestroyFns.push(fn);
|
||||
}
|
||||
|
||||
hasStarted() { return this._started; }
|
||||
hasStarted() {
|
||||
return this._started;
|
||||
}
|
||||
|
||||
play() {
|
||||
if (!this.parentPlayer) {
|
||||
@ -95,16 +105,22 @@ export class AnimationGroupPlayer implements AnimationPlayer {
|
||||
this.players.forEach(player => player.play());
|
||||
}
|
||||
|
||||
pause(): void { this.players.forEach(player => player.pause()); }
|
||||
pause(): void {
|
||||
this.players.forEach(player => player.pause());
|
||||
}
|
||||
|
||||
restart(): void { this.players.forEach(player => player.restart()); }
|
||||
restart(): void {
|
||||
this.players.forEach(player => player.restart());
|
||||
}
|
||||
|
||||
finish(): void {
|
||||
this._onFinish();
|
||||
this.players.forEach(player => player.finish());
|
||||
}
|
||||
|
||||
destroy(): void { this._onDestroy(); }
|
||||
destroy(): void {
|
||||
this._onDestroy();
|
||||
}
|
||||
|
||||
private _onDestroy() {
|
||||
if (!this._destroyed) {
|
||||
|
@ -94,11 +94,13 @@ export interface AnimationPlayer {
|
||||
* Provides a callback to invoke before the animation is destroyed.
|
||||
*/
|
||||
beforeDestroy?: () => any;
|
||||
/** @internal
|
||||
/**
|
||||
* @internal
|
||||
* Internal
|
||||
*/
|
||||
triggerCallback?: (phaseName: string) => void;
|
||||
/** @internal
|
||||
/**
|
||||
* @internal
|
||||
* Internal
|
||||
*/
|
||||
disabled?: boolean;
|
||||
@ -124,7 +126,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
private _finished = false;
|
||||
public parentPlayer: AnimationPlayer|null = null;
|
||||
public readonly totalTime: number;
|
||||
constructor(duration: number = 0, delay: number = 0) { this.totalTime = duration + delay; }
|
||||
constructor(duration: number = 0, delay: number = 0) {
|
||||
this.totalTime = duration + delay;
|
||||
}
|
||||
private _onFinish() {
|
||||
if (!this._finished) {
|
||||
this._finished = true;
|
||||
@ -132,10 +136,18 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
this._onDoneFns = [];
|
||||
}
|
||||
}
|
||||
onStart(fn: () => void): void { this._onStartFns.push(fn); }
|
||||
onDone(fn: () => void): void { this._onDoneFns.push(fn); }
|
||||
onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
|
||||
hasStarted(): boolean { return this._started; }
|
||||
onStart(fn: () => void): void {
|
||||
this._onStartFns.push(fn);
|
||||
}
|
||||
onDone(fn: () => void): void {
|
||||
this._onDoneFns.push(fn);
|
||||
}
|
||||
onDestroy(fn: () => void): void {
|
||||
this._onDestroyFns.push(fn);
|
||||
}
|
||||
hasStarted(): boolean {
|
||||
return this._started;
|
||||
}
|
||||
init(): void {}
|
||||
play(): void {
|
||||
if (!this.hasStarted()) {
|
||||
@ -146,7 +158,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
triggerMicrotask() { scheduleMicroTask(() => this._onFinish()); }
|
||||
triggerMicrotask() {
|
||||
scheduleMicroTask(() => this._onFinish());
|
||||
}
|
||||
|
||||
private _onStart() {
|
||||
this._onStartFns.forEach(fn => fn());
|
||||
@ -155,7 +169,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
|
||||
pause(): void {}
|
||||
restart(): void {}
|
||||
finish(): void { this._onFinish(); }
|
||||
finish(): void {
|
||||
this._onFinish();
|
||||
}
|
||||
destroy(): void {
|
||||
if (!this._destroyed) {
|
||||
this._destroyed = true;
|
||||
@ -169,7 +185,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
}
|
||||
reset(): void {}
|
||||
setPosition(position: number): void {}
|
||||
getPosition(): number { return 0; }
|
||||
getPosition(): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
triggerCallback(phaseName: string): void {
|
||||
|
Reference in New Issue
Block a user