refactor: move angular source to /packages rather than modules/@angular
This commit is contained in:
Jason Aden
14
packages/platform-browser/animations/index.ts
Normal file
14
packages/platform-browser/animations/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
// This file is not used to build this module. It is only used during editing
|
||||
// by the TypeScript language serivce and during build for verifcation. `ngc`
|
||||
// replaces this file with production index.ts when it rewrites private symbol
|
||||
// names.
|
||||
|
||||
export * from './src/animations';
|
||||
14
packages/platform-browser/animations/public_api.ts
Normal file
14
packages/platform-browser/animations/public_api.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module
|
||||
* @description
|
||||
* Entry point for all public APIs of the animation package.
|
||||
*/
|
||||
export * from './src/animations';
|
||||
22
packages/platform-browser/animations/src/animation_engine.ts
Normal file
22
packages/platform-browser/animations/src/animation_engine.ts
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationPlayer, AnimationTriggerMetadata} from '@angular/animations';
|
||||
|
||||
export abstract class AnimationEngine {
|
||||
abstract registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void;
|
||||
abstract onInsert(element: any, domFn: () => any): void;
|
||||
abstract onRemove(element: any, domFn: () => any): void;
|
||||
abstract setProperty(element: any, property: string, value: any): void;
|
||||
abstract listen(
|
||||
element: any, eventName: string, eventPhase: string,
|
||||
callback: (event: any) => any): () => any;
|
||||
abstract flush(): void;
|
||||
|
||||
get activePlayers(): AnimationPlayer[] { throw new Error('...'); }
|
||||
get queuedPlayers(): AnimationPlayer[] { throw new Error('...'); }
|
||||
}
|
||||
16
packages/platform-browser/animations/src/animations.ts
Normal file
16
packages/platform-browser/animations/src/animations.ts
Normal file
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module
|
||||
* @description
|
||||
* Entry point for all animation APIs of the animation browser package.
|
||||
*/
|
||||
export {BrowserAnimationsModule, NoopAnimationsModule} from './module';
|
||||
export {AnimationDriver} from './render/animation_driver';
|
||||
export * from './private_export';
|
||||
55
packages/platform-browser/animations/src/dsl/animation.ts
Normal file
55
packages/platform-browser/animations/src/dsl/animation.ts
Normal file
@ -0,0 +1,55 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationMetadata, AnimationPlayer, AnimationStyleMetadata, sequence, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {AnimationDriver} from '../render/animation_driver';
|
||||
import {DomAnimationEngine} from '../render/dom_animation_engine';
|
||||
import {normalizeStyles} from '../util';
|
||||
|
||||
import {AnimationTimelineInstruction} from './animation_timeline_instruction';
|
||||
import {buildAnimationKeyframes} from './animation_timeline_visitor';
|
||||
import {validateAnimationSequence} from './animation_validator_visitor';
|
||||
import {AnimationStyleNormalizer} from './style_normalization/animation_style_normalizer';
|
||||
|
||||
export class Animation {
|
||||
private _animationAst: AnimationMetadata;
|
||||
constructor(input: AnimationMetadata|AnimationMetadata[]) {
|
||||
const ast =
|
||||
Array.isArray(input) ? sequence(<AnimationMetadata[]>input) : <AnimationMetadata>input;
|
||||
const errors = validateAnimationSequence(ast);
|
||||
if (errors.length) {
|
||||
const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
this._animationAst = ast;
|
||||
}
|
||||
|
||||
buildTimelines(
|
||||
startingStyles: ɵStyleData|ɵStyleData[],
|
||||
destinationStyles: ɵStyleData|ɵStyleData[]): AnimationTimelineInstruction[] {
|
||||
const start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) :
|
||||
<ɵStyleData>startingStyles;
|
||||
const dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) :
|
||||
<ɵStyleData>destinationStyles;
|
||||
return buildAnimationKeyframes(this._animationAst, start, dest);
|
||||
}
|
||||
|
||||
// this is only used for development demo purposes for now
|
||||
private create(
|
||||
injector: any, element: any, startingStyles: ɵStyleData = {},
|
||||
destinationStyles: ɵStyleData = {}): AnimationPlayer {
|
||||
const instructions = this.buildTimelines(startingStyles, destinationStyles);
|
||||
|
||||
// note the code below is only here to make the tests happy (once the new renderer is
|
||||
// within core then the code below will interact with Renderer.transition(...))
|
||||
const driver: AnimationDriver = injector.get(AnimationDriver);
|
||||
const normalizer: AnimationStyleNormalizer = injector.get(AnimationStyleNormalizer);
|
||||
const engine = new DomAnimationEngine(driver, normalizer);
|
||||
return engine.animateTimeline(element, instructions);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata} from '@angular/animations';
|
||||
|
||||
export interface AnimationDslVisitor {
|
||||
visitState(ast: AnimationStateMetadata, context: any): any;
|
||||
visitTransition(ast: AnimationTransitionMetadata, context: any): any;
|
||||
visitSequence(ast: AnimationSequenceMetadata, context: any): any;
|
||||
visitGroup(ast: AnimationGroupMetadata, context: any): any;
|
||||
visitAnimate(ast: AnimationAnimateMetadata, context: any): any;
|
||||
visitStyle(ast: AnimationStyleMetadata, context: any): any;
|
||||
visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any): any;
|
||||
}
|
||||
|
||||
export function visitAnimationNode(
|
||||
visitor: AnimationDslVisitor, node: AnimationMetadata, context: any) {
|
||||
switch (node.type) {
|
||||
case AnimationMetadataType.State:
|
||||
return visitor.visitState(<AnimationStateMetadata>node, context);
|
||||
case AnimationMetadataType.Transition:
|
||||
return visitor.visitTransition(<AnimationTransitionMetadata>node, context);
|
||||
case AnimationMetadataType.Sequence:
|
||||
return visitor.visitSequence(<AnimationSequenceMetadata>node, context);
|
||||
case AnimationMetadataType.Group:
|
||||
return visitor.visitGroup(<AnimationGroupMetadata>node, context);
|
||||
case AnimationMetadataType.Animate:
|
||||
return visitor.visitAnimate(<AnimationAnimateMetadata>node, context);
|
||||
case AnimationMetadataType.KeyframeSequence:
|
||||
return visitor.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>node, context);
|
||||
case AnimationMetadataType.Style:
|
||||
return visitor.visitStyle(<AnimationStyleMetadata>node, context);
|
||||
default:
|
||||
throw new Error(`Unable to resolve animation metadata node #${node.type}`);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {ɵStyleData} from '@angular/animations';
|
||||
import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../render/animation_engine_instruction';
|
||||
|
||||
export interface AnimationTimelineInstruction extends AnimationEngineInstruction {
|
||||
keyframes: ɵStyleData[];
|
||||
duration: number;
|
||||
delay: number;
|
||||
totalTime: number;
|
||||
easing: string;
|
||||
}
|
||||
|
||||
export function createTimelineInstruction(
|
||||
keyframes: ɵStyleData[], duration: number, delay: number,
|
||||
easing: string): AnimationTimelineInstruction {
|
||||
return {
|
||||
type: AnimationTransitionInstructionType.TimelineAnimation,
|
||||
keyframes,
|
||||
duration,
|
||||
delay,
|
||||
totalTime: duration + delay, easing
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,446 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {copyStyles, normalizeStyles, parseTimeExpression} from '../util';
|
||||
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
import {AnimationTimelineInstruction, createTimelineInstruction} from './animation_timeline_instruction';
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* The code within this file aims to generate web-animations-compatible keyframes from Angular's
|
||||
* animation DSL code.
|
||||
*
|
||||
* The code below will be converted from:
|
||||
*
|
||||
* ```
|
||||
* sequence([
|
||||
* style({ opacity: 0 }),
|
||||
* animate(1000, style({ opacity: 0 }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* To:
|
||||
* ```
|
||||
* keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }]
|
||||
* duration = 1000
|
||||
* delay = 0
|
||||
* easing = ''
|
||||
* ```
|
||||
*
|
||||
* For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
|
||||
* combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
|
||||
*
|
||||
* [AST Traversal]
|
||||
* Each of the animation verbs, when executed, will return an string-map object representing what
|
||||
* type of action it is (style, animate, group, etc...) and the data associated with it. This means
|
||||
* that when functional composition mix of these functions is evaluated (like in the example above)
|
||||
* then it will end up producing a tree of objects representing the animation itself.
|
||||
*
|
||||
* When this animation object tree is processed by the visitor code below it will visit each of the
|
||||
* verb statements within the visitor. And during each visit it will build the context of the
|
||||
* animation keyframes by interacting with the `TimelineBuilder`.
|
||||
*
|
||||
* [TimelineBuilder]
|
||||
* This class is responsible for tracking the styles and building a series of keyframe objects for a
|
||||
* timeline between a start and end time. The builder starts off with an initial timeline and each
|
||||
* time the AST comes across a `group()`, `keyframes()` or a combination of the two wihtin a
|
||||
* `sequence()` then it will generate a sub timeline for each step as well as a new one after
|
||||
* they are complete.
|
||||
*
|
||||
* As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
|
||||
* timeline was created (based on one of the cases above) then the parent timeline will attempt to
|
||||
* merge the styles used within the sub timelines into itself (only with group() this will happen).
|
||||
* This happens with a merge operation (much like how the merge works in mergesort) and it will only
|
||||
* copy the most recently used styles from the sub timelines into the parent timeline. This ensures
|
||||
* that if the styles are used later on in another phase of the animation then they will be the most
|
||||
* up-to-date values.
|
||||
*
|
||||
* [How Missing Styles Are Updated]
|
||||
* Each timeline has a `backFill` property which is responsible for filling in new styles into
|
||||
* already processed keyframes if a new style shows up later within the animation sequence.
|
||||
*
|
||||
* ```
|
||||
* sequence([
|
||||
* style({ width: 0 }),
|
||||
* animate(1000, style({ width: 100 })),
|
||||
* animate(1000, style({ width: 200 })),
|
||||
* animate(1000, style({ width: 300 }))
|
||||
* animate(1000, style({ width: 400, height: 400 })) // notice how `height` doesn't exist anywhere
|
||||
* else
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* What is happening here is that the `height` value is added later in the sequence, but is missing
|
||||
* from all previous animation steps. Therefore when a keyframe is created it would also be missing
|
||||
* from all previous keyframes up until where it is first used. For the timeline keyframe generation
|
||||
* to properly fill in the style it will place the previous value (the value from the parent
|
||||
* timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
|
||||
* styles are objects that prototypically inhert from the backFill object, this means that if a
|
||||
* value is added into the backFill then it will automatically propagate any missing values to all
|
||||
* keyframes. Therefore the missing `height` value will be properly filled into the already
|
||||
* processed keyframes.
|
||||
*
|
||||
* When a sub-timeline is created it will have its own backFill property. This is done so that
|
||||
* styles present within the sub-timeline do not accidentally seep into the previous/future timeline
|
||||
* keyframes
|
||||
*
|
||||
* (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.)
|
||||
*
|
||||
* [Validation]
|
||||
* The code in this file is not responsible for validation. That functionality happens with within
|
||||
* the `AnimationValidatorVisitor` code.
|
||||
*/
|
||||
export function buildAnimationKeyframes(
|
||||
ast: AnimationMetadata | AnimationMetadata[], startingStyles: ɵStyleData = {},
|
||||
finalStyles: ɵStyleData = {}): AnimationTimelineInstruction[] {
|
||||
const normalizedAst =
|
||||
Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
|
||||
return new AnimationTimelineVisitor().buildKeyframes(normalizedAst, startingStyles, finalStyles);
|
||||
}
|
||||
|
||||
export declare type StyleAtTime = {
|
||||
time: number; value: string | number;
|
||||
};
|
||||
|
||||
export class AnimationTimelineContext {
|
||||
currentTimeline: TimelineBuilder;
|
||||
currentAnimateTimings: AnimateTimings;
|
||||
previousNode: AnimationMetadata = <AnimationMetadata>{};
|
||||
subContextCount = 0;
|
||||
|
||||
constructor(
|
||||
public errors: any[], public timelines: TimelineBuilder[],
|
||||
initialTimeline: TimelineBuilder = null) {
|
||||
this.currentTimeline = initialTimeline || new TimelineBuilder(0);
|
||||
timelines.push(this.currentTimeline);
|
||||
}
|
||||
|
||||
createSubContext(): AnimationTimelineContext {
|
||||
const context =
|
||||
new AnimationTimelineContext(this.errors, this.timelines, this.currentTimeline.fork());
|
||||
context.previousNode = this.previousNode;
|
||||
context.currentAnimateTimings = this.currentAnimateTimings;
|
||||
this.subContextCount++;
|
||||
return context;
|
||||
}
|
||||
|
||||
transformIntoNewTimeline(newTime = 0) {
|
||||
this.currentTimeline = this.currentTimeline.fork(newTime);
|
||||
this.timelines.push(this.currentTimeline);
|
||||
return this.currentTimeline;
|
||||
}
|
||||
|
||||
incrementTime(time: number) {
|
||||
this.currentTimeline.forwardTime(this.currentTimeline.duration + time);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationTimelineVisitor implements AnimationDslVisitor {
|
||||
buildKeyframes(ast: AnimationMetadata, startingStyles: ɵStyleData, finalStyles: ɵStyleData):
|
||||
AnimationTimelineInstruction[] {
|
||||
const context = new AnimationTimelineContext([], []);
|
||||
context.currentTimeline.setStyles(startingStyles);
|
||||
|
||||
visitAnimationNode(this, ast, context);
|
||||
const normalizedFinalStyles = copyStyles(finalStyles, true);
|
||||
|
||||
// this is a special case for when animate(TIME) is used (without any styles)
|
||||
// thus indicating to create an animation arc between the final keyframe and
|
||||
// the destination styles. When this occurs we need to ensure that the styles
|
||||
// that are missing on the finalStyles map are set to AUTO
|
||||
if (Object.keys(context.currentTimeline.getFinalKeyframe()).length == 0) {
|
||||
context.currentTimeline.properties.forEach(prop => {
|
||||
const val = normalizedFinalStyles[prop];
|
||||
if (val == null) {
|
||||
normalizedFinalStyles[prop] = AUTO_STYLE;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
context.currentTimeline.setStyles(normalizedFinalStyles);
|
||||
const timelineInstructions: AnimationTimelineInstruction[] = [];
|
||||
context.timelines.forEach(timeline => {
|
||||
// this checks to see if an actual animation happened
|
||||
if (timeline.hasStyling()) {
|
||||
timelineInstructions.push(timeline.buildKeyframes());
|
||||
}
|
||||
});
|
||||
|
||||
if (timelineInstructions.length == 0) {
|
||||
timelineInstructions.push(createTimelineInstruction([], 0, 0, ''));
|
||||
}
|
||||
return timelineInstructions;
|
||||
}
|
||||
|
||||
visitState(ast: AnimationStateMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitTransition(ast: AnimationTransitionMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitSequence(ast: AnimationSequenceMetadata, context: AnimationTimelineContext) {
|
||||
const subContextCount = context.subContextCount;
|
||||
if (context.previousNode.type == AnimationMetadataType.Style) {
|
||||
context.currentTimeline.forwardFrame();
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
}
|
||||
|
||||
ast.steps.forEach(s => visitAnimationNode(this, s, context));
|
||||
|
||||
// this means that some animation function within the sequence
|
||||
// ended up creating a sub timeline (which means the current
|
||||
// timeline cannot overlap with the contents of the sequence)
|
||||
if (context.subContextCount > subContextCount) {
|
||||
context.transformIntoNewTimeline();
|
||||
}
|
||||
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitGroup(ast: AnimationGroupMetadata, context: AnimationTimelineContext) {
|
||||
const innerTimelines: TimelineBuilder[] = [];
|
||||
let furthestTime = context.currentTimeline.currentTime;
|
||||
ast.steps.forEach(s => {
|
||||
const innerContext = context.createSubContext();
|
||||
visitAnimationNode(this, s, innerContext);
|
||||
furthestTime = Math.max(furthestTime, innerContext.currentTimeline.currentTime);
|
||||
innerTimelines.push(innerContext.currentTimeline);
|
||||
});
|
||||
|
||||
// this operation is run after the AST loop because otherwise
|
||||
// if the parent timeline's collected styles were updated then
|
||||
// it would pass in invalid data into the new-to-be forked items
|
||||
innerTimelines.forEach(
|
||||
timeline => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
|
||||
context.transformIntoNewTimeline(furthestTime);
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitAnimate(ast: AnimationAnimateMetadata, context: AnimationTimelineContext) {
|
||||
const timings = ast.timings.hasOwnProperty('duration') ?
|
||||
<AnimateTimings>ast.timings :
|
||||
parseTimeExpression(<string|number>ast.timings, context.errors);
|
||||
context.currentAnimateTimings = timings;
|
||||
|
||||
if (timings.delay) {
|
||||
context.incrementTime(timings.delay);
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
}
|
||||
|
||||
const astType = ast.styles ? ast.styles.type : -1;
|
||||
if (astType == AnimationMetadataType.KeyframeSequence) {
|
||||
this.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>ast.styles, context);
|
||||
} else {
|
||||
context.incrementTime(timings.duration);
|
||||
if (astType == AnimationMetadataType.Style) {
|
||||
this.visitStyle(<AnimationStyleMetadata>ast.styles, context);
|
||||
}
|
||||
}
|
||||
|
||||
context.currentAnimateTimings = null;
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitStyle(ast: AnimationStyleMetadata, context: AnimationTimelineContext) {
|
||||
// this is a special case when a style() call is issued directly after
|
||||
// a call to animate(). If the clock is not forwarded by one frame then
|
||||
// the style() calls will be merged into the previous animate() call
|
||||
// which is incorrect.
|
||||
if (!context.currentAnimateTimings &&
|
||||
context.previousNode.type == AnimationMetadataType.Animate) {
|
||||
context.currentTimeline.forwardFrame();
|
||||
}
|
||||
|
||||
const normalizedStyles = normalizeStyles(ast.styles);
|
||||
const easing = context.currentAnimateTimings && context.currentAnimateTimings.easing;
|
||||
if (easing) {
|
||||
normalizedStyles['easing'] = easing;
|
||||
}
|
||||
|
||||
context.currentTimeline.setStyles(normalizedStyles);
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitKeyframeSequence(
|
||||
ast: AnimationKeyframesSequenceMetadata, context: AnimationTimelineContext) {
|
||||
const MAX_KEYFRAME_OFFSET = 1;
|
||||
const limit = ast.steps.length - 1;
|
||||
const firstKeyframe = ast.steps[0];
|
||||
|
||||
let offsetGap = 0;
|
||||
const containsOffsets = getOffset(firstKeyframe) != null;
|
||||
if (!containsOffsets) {
|
||||
offsetGap = MAX_KEYFRAME_OFFSET / limit;
|
||||
}
|
||||
|
||||
const startTime = context.currentTimeline.duration;
|
||||
const duration = context.currentAnimateTimings.duration;
|
||||
const innerContext = context.createSubContext();
|
||||
const innerTimeline = innerContext.currentTimeline;
|
||||
innerTimeline.easing = context.currentAnimateTimings.easing;
|
||||
|
||||
ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
|
||||
const normalizedStyles = normalizeStyles(step.styles);
|
||||
const offset = containsOffsets ?
|
||||
(step.offset != null ? step.offset : parseFloat(normalizedStyles['offset'] as string)) :
|
||||
(i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
|
||||
innerTimeline.forwardTime(offset * duration);
|
||||
innerTimeline.setStyles(normalizedStyles);
|
||||
});
|
||||
|
||||
// this will ensure that the parent timeline gets all the styles from
|
||||
// the child even if the new timeline below is not used
|
||||
context.currentTimeline.mergeTimelineCollectedStyles(innerTimeline);
|
||||
|
||||
// we do this because the window between this timeline and the sub timeline
|
||||
// should ensure that the styles within are exactly the same as they were before
|
||||
context.transformIntoNewTimeline(startTime + duration);
|
||||
context.previousNode = ast;
|
||||
}
|
||||
}
|
||||
|
||||
export class TimelineBuilder {
|
||||
public duration: number = 0;
|
||||
public easing: string = '';
|
||||
private _currentKeyframe: ɵStyleData;
|
||||
private _keyframes = new Map<number, ɵStyleData>();
|
||||
private _styleSummary: {[prop: string]: StyleAtTime} = {};
|
||||
private _localTimelineStyles: ɵStyleData;
|
||||
private _backFill: ɵStyleData = {};
|
||||
|
||||
constructor(public startTime: number, private _globalTimelineStyles: ɵStyleData = null) {
|
||||
this._localTimelineStyles = Object.create(this._backFill, {});
|
||||
if (!this._globalTimelineStyles) {
|
||||
this._globalTimelineStyles = this._localTimelineStyles;
|
||||
}
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
hasStyling(): boolean { return this._keyframes.size > 1; }
|
||||
|
||||
get currentTime() { return this.startTime + this.duration; }
|
||||
|
||||
fork(currentTime = 0): TimelineBuilder {
|
||||
return new TimelineBuilder(currentTime || this.currentTime, this._globalTimelineStyles);
|
||||
}
|
||||
|
||||
private _loadKeyframe() {
|
||||
this._currentKeyframe = this._keyframes.get(this.duration);
|
||||
if (!this._currentKeyframe) {
|
||||
this._currentKeyframe = Object.create(this._backFill, {});
|
||||
this._keyframes.set(this.duration, this._currentKeyframe);
|
||||
}
|
||||
}
|
||||
|
||||
forwardFrame() {
|
||||
this.duration++;
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
forwardTime(time: number) {
|
||||
this.duration = time;
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
private _updateStyle(prop: string, value: string|number) {
|
||||
if (prop != 'easing') {
|
||||
this._localTimelineStyles[prop] = value;
|
||||
this._globalTimelineStyles[prop] = value;
|
||||
this._styleSummary[prop] = {time: this.currentTime, value};
|
||||
}
|
||||
}
|
||||
|
||||
setStyles(styles: ɵStyleData) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
if (prop !== 'offset') {
|
||||
const val = styles[prop];
|
||||
this._currentKeyframe[prop] = val;
|
||||
if (prop !== 'easing' && !this._localTimelineStyles[prop]) {
|
||||
this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
|
||||
}
|
||||
this._updateStyle(prop, val);
|
||||
}
|
||||
});
|
||||
Object.keys(this._localTimelineStyles).forEach(prop => {
|
||||
if (!this._currentKeyframe.hasOwnProperty(prop)) {
|
||||
this._currentKeyframe[prop] = this._localTimelineStyles[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
|
||||
|
||||
getFinalKeyframe() { return this._keyframes.get(this.duration); }
|
||||
|
||||
get properties() {
|
||||
const properties: string[] = [];
|
||||
for (let prop in this._currentKeyframe) {
|
||||
properties.push(prop);
|
||||
}
|
||||
return properties;
|
||||
}
|
||||
|
||||
mergeTimelineCollectedStyles(timeline: TimelineBuilder) {
|
||||
Object.keys(timeline._styleSummary).forEach(prop => {
|
||||
const details0 = this._styleSummary[prop];
|
||||
const details1 = timeline._styleSummary[prop];
|
||||
if (!details0 || details1.time > details0.time) {
|
||||
this._updateStyle(prop, details1.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
buildKeyframes(): AnimationTimelineInstruction {
|
||||
const finalKeyframes: ɵStyleData[] = [];
|
||||
// special case for when there are only start/destination
|
||||
// styles but no actual animation animate steps...
|
||||
if (this.duration == 0) {
|
||||
const targetKeyframe = this.getFinalKeyframe();
|
||||
|
||||
const firstKeyframe = copyStyles(targetKeyframe, true);
|
||||
firstKeyframe['offset'] = 0;
|
||||
finalKeyframes.push(firstKeyframe);
|
||||
|
||||
const lastKeyframe = copyStyles(targetKeyframe, true);
|
||||
lastKeyframe['offset'] = 1;
|
||||
finalKeyframes.push(lastKeyframe);
|
||||
} else {
|
||||
this._keyframes.forEach((keyframe, time) => {
|
||||
const finalKeyframe = copyStyles(keyframe, true);
|
||||
finalKeyframe['offset'] = time / this.duration;
|
||||
finalKeyframes.push(finalKeyframe);
|
||||
});
|
||||
}
|
||||
|
||||
return createTimelineInstruction(finalKeyframes, this.duration, this.startTime, this.easing);
|
||||
}
|
||||
}
|
||||
|
||||
function getOffset(ast: AnimationStyleMetadata): number {
|
||||
let offset = ast.offset;
|
||||
if (offset == null) {
|
||||
const styles = ast.styles;
|
||||
if (Array.isArray(styles)) {
|
||||
for (let i = 0; i < styles.length; i++) {
|
||||
const o = styles[i]['offset'] as number;
|
||||
if (o != null) {
|
||||
offset = o;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
offset = styles['offset'] as number;
|
||||
}
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
export const ANY_STATE = '*';
|
||||
export declare type TransitionMatcherFn = (fromState: any, toState: any) => boolean;
|
||||
|
||||
export function parseTransitionExpr(
|
||||
transitionValue: string | TransitionMatcherFn, errors: string[]): TransitionMatcherFn[] {
|
||||
const expressions: TransitionMatcherFn[] = [];
|
||||
if (typeof transitionValue == 'string') {
|
||||
(<string>transitionValue)
|
||||
.split(/\s*,\s*/)
|
||||
.forEach(str => parseInnerTransitionStr(str, expressions, errors));
|
||||
} else {
|
||||
expressions.push(<TransitionMatcherFn>transitionValue);
|
||||
}
|
||||
return expressions;
|
||||
}
|
||||
|
||||
function parseInnerTransitionStr(
|
||||
eventStr: string, expressions: TransitionMatcherFn[], errors: string[]) {
|
||||
if (eventStr[0] == ':') {
|
||||
eventStr = parseAnimationAlias(eventStr, errors);
|
||||
}
|
||||
const match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/);
|
||||
if (match == null || match.length < 4) {
|
||||
errors.push(`The provided transition expression "${eventStr}" is not supported`);
|
||||
return expressions;
|
||||
}
|
||||
|
||||
const fromState = match[1];
|
||||
const separator = match[2];
|
||||
const toState = match[3];
|
||||
expressions.push(makeLambdaFromStates(fromState, toState));
|
||||
|
||||
const isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE;
|
||||
if (separator[0] == '<' && !isFullAnyStateExpr) {
|
||||
expressions.push(makeLambdaFromStates(toState, fromState));
|
||||
}
|
||||
}
|
||||
|
||||
function parseAnimationAlias(alias: string, errors: string[]): string {
|
||||
switch (alias) {
|
||||
case ':enter':
|
||||
return 'void => *';
|
||||
case ':leave':
|
||||
return '* => void';
|
||||
default:
|
||||
errors.push(`The transition alias value "${alias}" is not supported`);
|
||||
return '* => *';
|
||||
}
|
||||
}
|
||||
|
||||
function makeLambdaFromStates(lhs: string, rhs: string): TransitionMatcherFn {
|
||||
return (fromState: any, toState: any): boolean => {
|
||||
const lhsMatch = lhs == ANY_STATE || lhs == fromState;
|
||||
const rhsMatch = rhs == ANY_STATE || rhs == toState;
|
||||
return lhsMatch && rhsMatch;
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {buildAnimationKeyframes} from './animation_timeline_visitor';
|
||||
import {TransitionMatcherFn} from './animation_transition_expr';
|
||||
import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
|
||||
|
||||
export class AnimationTransitionFactory {
|
||||
private _animationAst: AnimationMetadata;
|
||||
|
||||
constructor(
|
||||
private _triggerName: string, ast: AnimationTransitionMetadata,
|
||||
private matchFns: TransitionMatcherFn[],
|
||||
private _stateStyles: {[stateName: string]: ɵStyleData}) {
|
||||
const normalizedAst = Array.isArray(ast.animation) ?
|
||||
sequence(<AnimationMetadata[]>ast.animation) :
|
||||
<AnimationMetadata>ast.animation;
|
||||
this._animationAst = normalizedAst;
|
||||
}
|
||||
|
||||
match(currentState: any, nextState: any): AnimationTransitionInstruction {
|
||||
if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
|
||||
|
||||
const backupStateStyles = this._stateStyles['*'] || {};
|
||||
const currentStateStyles = this._stateStyles[currentState] || backupStateStyles;
|
||||
const nextStateStyles = this._stateStyles[nextState] || backupStateStyles;
|
||||
|
||||
const timelines =
|
||||
buildAnimationKeyframes(this._animationAst, currentStateStyles, nextStateStyles);
|
||||
|
||||
return createTransitionInstruction(
|
||||
this._triggerName, currentState, nextState, nextState === 'void', currentStateStyles,
|
||||
nextStateStyles, timelines);
|
||||
}
|
||||
}
|
||||
|
||||
function oneOrMoreTransitionsMatch(
|
||||
matchFns: TransitionMatcherFn[], currentState: any, nextState: any): boolean {
|
||||
return matchFns.some(fn => fn(currentState, nextState));
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {ɵStyleData} from '@angular/animations';
|
||||
import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../render/animation_engine_instruction';
|
||||
import {AnimationTimelineInstruction} from './animation_timeline_instruction';
|
||||
|
||||
export interface AnimationTransitionInstruction extends AnimationEngineInstruction {
|
||||
triggerName: string;
|
||||
isRemovalTransition: boolean;
|
||||
fromState: string;
|
||||
fromStyles: ɵStyleData;
|
||||
toState: string;
|
||||
toStyles: ɵStyleData;
|
||||
timelines: AnimationTimelineInstruction[];
|
||||
}
|
||||
|
||||
export function createTransitionInstruction(
|
||||
triggerName: string, fromState: string, toState: string, isRemovalTransition: boolean,
|
||||
fromStyles: ɵStyleData, toStyles: ɵStyleData,
|
||||
timelines: AnimationTimelineInstruction[]): AnimationTransitionInstruction {
|
||||
return {
|
||||
type: AnimationTransitionInstructionType.TransitionAnimation,
|
||||
triggerName,
|
||||
isRemovalTransition,
|
||||
fromState,
|
||||
fromStyles,
|
||||
toState,
|
||||
toStyles,
|
||||
timelines
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,115 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {copyStyles, normalizeStyles} from '../util';
|
||||
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
import {parseTransitionExpr} from './animation_transition_expr';
|
||||
import {AnimationTransitionFactory} from './animation_transition_factory';
|
||||
import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
|
||||
import {validateAnimationSequence} from './animation_validator_visitor';
|
||||
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
|
||||
return new AnimationTriggerVisitor().buildTrigger(name, definitions);
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class AnimationTrigger {
|
||||
public transitionFactories: AnimationTransitionFactory[] = [];
|
||||
public states: {[stateName: string]: ɵStyleData} = {};
|
||||
|
||||
constructor(
|
||||
public name: string, states: {[stateName: string]: ɵStyleData},
|
||||
private _transitionAsts: AnimationTransitionMetadata[]) {
|
||||
Object.keys(states).forEach(
|
||||
stateName => { this.states[stateName] = copyStyles(states[stateName], false); });
|
||||
|
||||
const errors: string[] = [];
|
||||
_transitionAsts.forEach(ast => {
|
||||
const exprs = parseTransitionExpr(ast.expr, errors);
|
||||
const sequenceErrors = validateAnimationSequence(ast);
|
||||
if (sequenceErrors.length) {
|
||||
errors.push(...sequenceErrors);
|
||||
} else {
|
||||
this.transitionFactories.push(
|
||||
new AnimationTransitionFactory(this.name, ast, exprs, states));
|
||||
}
|
||||
});
|
||||
|
||||
if (errors.length) {
|
||||
const LINE_START = '\n - ';
|
||||
throw new Error(
|
||||
`Animation parsing for the ${name} trigger have failed:${LINE_START}${errors.join(LINE_START)}`);
|
||||
}
|
||||
}
|
||||
|
||||
createFallbackInstruction(currentState: any, nextState: any): AnimationTransitionInstruction {
|
||||
const backupStateStyles = this.states['*'] || {};
|
||||
const currentStateStyles = this.states[currentState] || backupStateStyles;
|
||||
const nextStateStyles = this.states[nextState] || backupStateStyles;
|
||||
return createTransitionInstruction(
|
||||
this.name, currentState, nextState, nextState == 'void', currentStateStyles,
|
||||
nextStateStyles, []);
|
||||
}
|
||||
|
||||
matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction {
|
||||
for (let i = 0; i < this.transitionFactories.length; i++) {
|
||||
let result = this.transitionFactories[i].match(currentState, nextState);
|
||||
if (result) return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class AnimationTriggerContext {
|
||||
public errors: string[] = [];
|
||||
public states: {[stateName: string]: ɵStyleData} = {};
|
||||
public transitions: AnimationTransitionMetadata[] = [];
|
||||
}
|
||||
|
||||
class AnimationTriggerVisitor implements AnimationDslVisitor {
|
||||
buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
|
||||
const context = new AnimationTriggerContext();
|
||||
definitions.forEach(def => visitAnimationNode(this, def, context));
|
||||
return new AnimationTrigger(name, context.states, context.transitions);
|
||||
}
|
||||
|
||||
visitState(ast: AnimationStateMetadata, context: any): any {
|
||||
context.states[ast.name] = normalizeStyles(ast.styles.styles);
|
||||
}
|
||||
|
||||
visitTransition(ast: AnimationTransitionMetadata, context: any): any {
|
||||
context.transitions.push(ast);
|
||||
}
|
||||
|
||||
visitSequence(ast: AnimationSequenceMetadata, context: any) {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitGroup(ast: AnimationGroupMetadata, context: any) {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitAnimate(ast: AnimationAnimateMetadata, context: any) {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitStyle(ast: AnimationStyleMetadata, context: any) {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,195 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence} from '@angular/animations';
|
||||
|
||||
import {normalizeStyles, parseTimeExpression} from '../util';
|
||||
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
|
||||
export type StyleTimeTuple = {
|
||||
startTime: number; endTime: number;
|
||||
};
|
||||
|
||||
/*
|
||||
* [Validation]
|
||||
* The visitor code below will traverse the animation AST generated by the animation verb functions
|
||||
* (the output is a tree of objects) and attempt to perform a series of validations on the data. The
|
||||
* following corner-cases will be validated:
|
||||
*
|
||||
* 1. Overlap of animations
|
||||
* Given that a CSS property cannot be animated in more than one place at the same time, it's
|
||||
* important that this behaviour is detected and validated. The way in which this occurs is that
|
||||
* each time a style property is examined, a string-map containing the property will be updated with
|
||||
* the start and end times for when the property is used within an animation step.
|
||||
*
|
||||
* If there are two or more parallel animations that are currently running (these are invoked by the
|
||||
* group()) on the same element then the validator will throw an error. Since the start/end timing
|
||||
* values are collected for each property then if the current animation step is animating the same
|
||||
* property and its timing values fall anywhere into the window of time that the property is
|
||||
* currently being animated within then this is what causes an error.
|
||||
*
|
||||
* 2. Timing values
|
||||
* The validator will validate to see if a timing value of `duration delay easing` or
|
||||
* `durationNumber` is valid or not.
|
||||
*
|
||||
* (note that upon validation the code below will replace the timing data with an object containing
|
||||
* {duration,delay,easing}.
|
||||
*
|
||||
* 3. Offset Validation
|
||||
* Each of the style() calls are allowed to have an offset value when placed inside of keyframes().
|
||||
* Offsets within keyframes() are considered valid when:
|
||||
*
|
||||
* - No offsets are used at all
|
||||
* - Each style() entry contains an offset value
|
||||
* - Each offset is between 0 and 1
|
||||
* - Each offset is greater to or equal than the previous one
|
||||
*
|
||||
* Otherwise an error will be thrown.
|
||||
*/
|
||||
export function validateAnimationSequence(ast: AnimationMetadata) {
|
||||
const normalizedAst =
|
||||
Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
|
||||
return new AnimationValidatorVisitor().validate(normalizedAst);
|
||||
}
|
||||
|
||||
export class AnimationValidatorVisitor implements AnimationDslVisitor {
|
||||
validate(ast: AnimationMetadata): string[] {
|
||||
const context = new AnimationValidatorContext();
|
||||
visitAnimationNode(this, ast, context);
|
||||
return context.errors;
|
||||
}
|
||||
|
||||
visitState(ast: AnimationStateMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitTransition(ast: AnimationTransitionMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitSequence(ast: AnimationSequenceMetadata, context: AnimationValidatorContext): any {
|
||||
ast.steps.forEach(step => visitAnimationNode(this, step, context));
|
||||
}
|
||||
|
||||
visitGroup(ast: AnimationGroupMetadata, context: AnimationValidatorContext): any {
|
||||
const currentTime = context.currentTime;
|
||||
let furthestTime = 0;
|
||||
ast.steps.forEach(step => {
|
||||
context.currentTime = currentTime;
|
||||
visitAnimationNode(this, step, context);
|
||||
furthestTime = Math.max(furthestTime, context.currentTime);
|
||||
});
|
||||
context.currentTime = furthestTime;
|
||||
}
|
||||
|
||||
visitAnimate(ast: AnimationAnimateMetadata, context: AnimationValidatorContext): any {
|
||||
// we reassign the timings here so that they are not reparsed each
|
||||
// time an animation occurs
|
||||
context.currentAnimateTimings = ast.timings =
|
||||
parseTimeExpression(<string|number>ast.timings, context.errors);
|
||||
|
||||
const astType = ast.styles && ast.styles.type;
|
||||
if (astType == AnimationMetadataType.KeyframeSequence) {
|
||||
this.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>ast.styles, context);
|
||||
} else {
|
||||
context.currentTime +=
|
||||
context.currentAnimateTimings.duration + context.currentAnimateTimings.delay;
|
||||
if (astType == AnimationMetadataType.Style) {
|
||||
this.visitStyle(<AnimationStyleMetadata>ast.styles, context);
|
||||
}
|
||||
}
|
||||
|
||||
context.currentAnimateTimings = null;
|
||||
}
|
||||
|
||||
visitStyle(ast: AnimationStyleMetadata, context: AnimationValidatorContext): any {
|
||||
const styleData = normalizeStyles(ast.styles);
|
||||
const timings = context.currentAnimateTimings;
|
||||
let endTime = context.currentTime;
|
||||
let startTime = context.currentTime;
|
||||
if (timings && startTime > 0) {
|
||||
startTime -= timings.duration + timings.delay;
|
||||
}
|
||||
Object.keys(styleData).forEach(prop => {
|
||||
const collectedEntry = context.collectedStyles[prop];
|
||||
let updateCollectedStyle = true;
|
||||
if (collectedEntry) {
|
||||
if (startTime != endTime && startTime >= collectedEntry.startTime &&
|
||||
endTime <= collectedEntry.endTime) {
|
||||
context.errors.push(
|
||||
`The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry.endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
|
||||
updateCollectedStyle = false;
|
||||
}
|
||||
|
||||
// we always choose the smaller start time value since we
|
||||
// want to have a record of the entire animation window where
|
||||
// the style property is being animated in between
|
||||
startTime = collectedEntry.startTime;
|
||||
}
|
||||
if (updateCollectedStyle) {
|
||||
context.collectedStyles[prop] = {startTime, endTime};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
visitKeyframeSequence(
|
||||
ast: AnimationKeyframesSequenceMetadata, context: AnimationValidatorContext): any {
|
||||
let totalKeyframesWithOffsets = 0;
|
||||
const offsets: number[] = [];
|
||||
let offsetsOutOfOrder = false;
|
||||
let keyframesOutOfRange = false;
|
||||
let previousOffset: number = 0;
|
||||
ast.steps.forEach(step => {
|
||||
const styleData = normalizeStyles(step.styles);
|
||||
let offset = 0;
|
||||
if (styleData.hasOwnProperty('offset')) {
|
||||
totalKeyframesWithOffsets++;
|
||||
offset = <number>styleData['offset'];
|
||||
}
|
||||
keyframesOutOfRange = keyframesOutOfRange || offset < 0 || offset > 1;
|
||||
offsetsOutOfOrder = offsetsOutOfOrder || offset < previousOffset;
|
||||
previousOffset = offset;
|
||||
offsets.push(offset);
|
||||
});
|
||||
|
||||
if (keyframesOutOfRange) {
|
||||
context.errors.push(`Please ensure that all keyframe offsets are between 0 and 1`);
|
||||
}
|
||||
|
||||
if (offsetsOutOfOrder) {
|
||||
context.errors.push(`Please ensure that all keyframe offsets are in order`);
|
||||
}
|
||||
|
||||
const length = ast.steps.length;
|
||||
let generatedOffset = 0;
|
||||
if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) {
|
||||
context.errors.push(`Not all style() steps within the declared keyframes() contain offsets`);
|
||||
} else if (totalKeyframesWithOffsets == 0) {
|
||||
generatedOffset = 1 / length;
|
||||
}
|
||||
|
||||
const limit = length - 1;
|
||||
const currentTime = context.currentTime;
|
||||
const animateDuration = context.currentAnimateTimings.duration;
|
||||
ast.steps.forEach((step, i) => {
|
||||
const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
|
||||
const durationUpToThisFrame = offset * animateDuration;
|
||||
context.currentTime =
|
||||
currentTime + context.currentAnimateTimings.delay + durationUpToThisFrame;
|
||||
context.currentAnimateTimings.duration = durationUpToThisFrame;
|
||||
this.visitStyle(step, context);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationValidatorContext {
|
||||
public errors: string[] = [];
|
||||
public currentTime: number = 0;
|
||||
public currentAnimateTimings: AnimateTimings;
|
||||
public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export abstract class AnimationStyleNormalizer {
|
||||
abstract normalizePropertyName(propertyName: string, errors: string[]): string;
|
||||
abstract normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class NoopAnimationStyleNormalizer {
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string { return propertyName; }
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
return <any>value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationStyleNormalizer} from './animation_style_normalizer';
|
||||
|
||||
export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string {
|
||||
return dashCaseToCamelCase(propertyName);
|
||||
}
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
let unit: string = '';
|
||||
const strVal = value.toString().trim();
|
||||
|
||||
if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') {
|
||||
if (typeof value === 'number') {
|
||||
unit = 'px';
|
||||
} else {
|
||||
const valAndSuffixMatch = value.match(/^[+-]?[\d\.]+([a-z]*)$/);
|
||||
if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
|
||||
errors.push(`Please provide a CSS unit value for ${userProvidedProperty}:${value}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
return strVal + unit;
|
||||
}
|
||||
}
|
||||
|
||||
const DIMENSIONAL_PROP_MAP = makeBooleanMap(
|
||||
'width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent'
|
||||
.split(','));
|
||||
|
||||
function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
|
||||
const map: {[key: string]: boolean} = {};
|
||||
keys.forEach(key => map[key] = true);
|
||||
return map;
|
||||
}
|
||||
|
||||
const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
|
||||
export function dashCaseToCamelCase(input: string): string {
|
||||
return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
|
||||
}
|
||||
31
packages/platform-browser/animations/src/module.ts
Normal file
31
packages/platform-browser/animations/src/module.ts
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BrowserModule, ɵDomRendererFactory2} from '@angular/platform-browser';
|
||||
|
||||
import {BROWSER_ANIMATIONS_PROVIDERS, BROWSER_NOOP_ANIMATIONS_PROVIDERS} from './providers';
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
providers: BROWSER_ANIMATIONS_PROVIDERS,
|
||||
})
|
||||
export class BrowserAnimationsModule {
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
providers: BROWSER_NOOP_ANIMATIONS_PROVIDERS,
|
||||
})
|
||||
export class NoopAnimationsModule {
|
||||
}
|
||||
13
packages/platform-browser/animations/src/private_export.ts
Normal file
13
packages/platform-browser/animations/src/private_export.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
export {AnimationEngine as ɵAnimationEngine} from './animation_engine';
|
||||
export {Animation as ɵAnimation} from './dsl/animation';
|
||||
export {AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer} from './dsl/style_normalization/animation_style_normalizer';
|
||||
export {NoopAnimationDriver as ɵNoopAnimationDriver} from './render/animation_driver';
|
||||
export {AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory} from './render/animation_renderer';
|
||||
export {DomAnimationEngine as ɵDomAnimationEngine} from './render/dom_animation_engine';
|
||||
68
packages/platform-browser/animations/src/providers.ts
Normal file
68
packages/platform-browser/animations/src/providers.ts
Normal file
@ -0,0 +1,68 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Injectable, NgZone, Provider, RendererFactory2} from '@angular/core';
|
||||
import {ɵDomRendererFactory2} from '@angular/platform-browser';
|
||||
|
||||
import {AnimationEngine} from './animation_engine';
|
||||
import {AnimationStyleNormalizer} from './dsl/style_normalization/animation_style_normalizer';
|
||||
import {WebAnimationsStyleNormalizer} from './dsl/style_normalization/web_animations_style_normalizer';
|
||||
import {AnimationDriver, NoopAnimationDriver} from './render/animation_driver';
|
||||
import {AnimationRendererFactory} from './render/animation_renderer';
|
||||
import {DomAnimationEngine} from './render/dom_animation_engine';
|
||||
import {NoopAnimationEngine} from './render/noop_animation_engine';
|
||||
import {WebAnimationsDriver, supportsWebAnimations} from './render/web_animations/web_animations_driver';
|
||||
|
||||
@Injectable()
|
||||
export class InjectableAnimationEngine extends DomAnimationEngine {
|
||||
constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
|
||||
super(driver, normalizer);
|
||||
}
|
||||
}
|
||||
|
||||
export function instantiateSupportedAnimationDriver() {
|
||||
if (supportsWebAnimations()) {
|
||||
return new WebAnimationsDriver();
|
||||
}
|
||||
return new NoopAnimationDriver();
|
||||
}
|
||||
|
||||
export function instantiateDefaultStyleNormalizer() {
|
||||
return new WebAnimationsStyleNormalizer();
|
||||
}
|
||||
|
||||
export function instantiateRendererFactory(
|
||||
renderer: ɵDomRendererFactory2, engine: AnimationEngine, zone: NgZone) {
|
||||
return new AnimationRendererFactory(renderer, engine, zone);
|
||||
}
|
||||
|
||||
/**
|
||||
* Separate providers from the actual module so that we can do a local modification in Google3 to
|
||||
* include them in the BrowserModule.
|
||||
*/
|
||||
export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
|
||||
{provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver},
|
||||
{provide: AnimationStyleNormalizer, useFactory: instantiateDefaultStyleNormalizer},
|
||||
{provide: AnimationEngine, useClass: InjectableAnimationEngine}, {
|
||||
provide: RendererFactory2,
|
||||
useFactory: instantiateRendererFactory,
|
||||
deps: [ɵDomRendererFactory2, AnimationEngine, NgZone]
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Separate providers from the actual module so that we can do a local modification in Google3 to
|
||||
* include them in the BrowserTestingModule.
|
||||
*/
|
||||
export const BROWSER_NOOP_ANIMATIONS_PROVIDERS: Provider[] = [
|
||||
{provide: AnimationEngine, useClass: NoopAnimationEngine}, {
|
||||
provide: RendererFactory2,
|
||||
useFactory: instantiateRendererFactory,
|
||||
deps: [ɵDomRendererFactory2, AnimationEngine, NgZone]
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {AnimationPlayer, NoopAnimationPlayer} from '@angular/animations';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export class NoopAnimationDriver implements AnimationDriver {
|
||||
animate(
|
||||
element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
|
||||
easing: string, previousPlayers: any[] = []): AnimationPlayer {
|
||||
return new NoopAnimationPlayer();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export abstract class AnimationDriver {
|
||||
static NOOP: AnimationDriver = new NoopAnimationDriver();
|
||||
abstract animate(
|
||||
element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
|
||||
easing: string, previousPlayers?: any[]): any;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
export const enum AnimationTransitionInstructionType {TransitionAnimation, TimelineAnimation}
|
||||
|
||||
export interface AnimationEngineInstruction { type: AnimationTransitionInstructionType; }
|
||||
@ -0,0 +1,163 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationEvent, AnimationTriggerMetadata} from '@angular/animations';
|
||||
import {Injectable, NgZone, Renderer2, RendererFactory2, RendererType2} from '@angular/core';
|
||||
|
||||
import {AnimationEngine} from '../animation_engine';
|
||||
|
||||
@Injectable()
|
||||
export class AnimationRendererFactory implements RendererFactory2 {
|
||||
constructor(
|
||||
private delegate: RendererFactory2, private _engine: AnimationEngine, private _zone: NgZone) {
|
||||
}
|
||||
|
||||
createRenderer(hostElement: any, type: RendererType2): Renderer2 {
|
||||
let delegate = this.delegate.createRenderer(hostElement, type);
|
||||
if (!hostElement || !type || !type.data || !type.data['animation']) return delegate;
|
||||
|
||||
const namespaceId = type.id;
|
||||
const animationTriggers = type.data['animation'] as AnimationTriggerMetadata[];
|
||||
animationTriggers.forEach(
|
||||
trigger => this._engine.registerTrigger(trigger, namespaceify(namespaceId, trigger.name)));
|
||||
return new AnimationRenderer(delegate, this._engine, this._zone, namespaceId);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationRenderer implements Renderer2 {
|
||||
public destroyNode: (node: any) => (void|any) = null;
|
||||
private _flushPromise: Promise<any> = null;
|
||||
|
||||
constructor(
|
||||
public delegate: Renderer2, private _engine: AnimationEngine, private _zone: NgZone,
|
||||
private _namespaceId: string) {
|
||||
this.destroyNode = this.delegate.destroyNode ? (n) => delegate.destroyNode(n) : null;
|
||||
}
|
||||
|
||||
get data() { return this.delegate.data; }
|
||||
|
||||
destroy(): void { this.delegate.destroy(); }
|
||||
|
||||
createElement(name: string, namespace?: string): any {
|
||||
return this.delegate.createElement(name, namespace);
|
||||
}
|
||||
|
||||
createComment(value: string): any { return this.delegate.createComment(value); }
|
||||
|
||||
createText(value: string): any { return this.delegate.createText(value); }
|
||||
|
||||
selectRootElement(selectorOrNode: string|any): any {
|
||||
return this.delegate.selectRootElement(selectorOrNode);
|
||||
}
|
||||
|
||||
parentNode(node: any): any { return this.delegate.parentNode(node); }
|
||||
|
||||
nextSibling(node: any): any { return this.delegate.nextSibling(node); }
|
||||
|
||||
setAttribute(el: any, name: string, value: string, namespace?: string): void {
|
||||
this.delegate.setAttribute(el, name, value, namespace);
|
||||
}
|
||||
|
||||
removeAttribute(el: any, name: string, namespace?: string): void {
|
||||
this.delegate.removeAttribute(el, name, namespace);
|
||||
}
|
||||
|
||||
addClass(el: any, name: string): void { this.delegate.addClass(el, name); }
|
||||
|
||||
removeClass(el: any, name: string): void { this.delegate.removeClass(el, name); }
|
||||
|
||||
setStyle(el: any, style: string, value: any, hasVendorPrefix: boolean, hasImportant: boolean):
|
||||
void {
|
||||
this.delegate.setStyle(el, style, value, hasVendorPrefix, hasImportant);
|
||||
}
|
||||
|
||||
removeStyle(el: any, style: string, hasVendorPrefix: boolean): void {
|
||||
this.delegate.removeStyle(el, style, hasVendorPrefix);
|
||||
}
|
||||
|
||||
setValue(node: any, value: string): void { this.delegate.setValue(node, value); }
|
||||
|
||||
appendChild(parent: any, newChild: any): void {
|
||||
this._engine.onInsert(newChild, () => this.delegate.appendChild(parent, newChild));
|
||||
this._queueFlush();
|
||||
}
|
||||
|
||||
insertBefore(parent: any, newChild: any, refChild: any): void {
|
||||
this._engine.onInsert(newChild, () => this.delegate.insertBefore(parent, newChild, refChild));
|
||||
this._queueFlush();
|
||||
}
|
||||
|
||||
removeChild(parent: any, oldChild: any): void {
|
||||
this._engine.onRemove(oldChild, () => this.delegate.removeChild(parent, oldChild));
|
||||
this._queueFlush();
|
||||
}
|
||||
|
||||
setProperty(el: any, name: string, value: any): void {
|
||||
if (name.charAt(0) == '@') {
|
||||
this._engine.setProperty(el, namespaceify(this._namespaceId, name.substr(1)), value);
|
||||
this._queueFlush();
|
||||
} else {
|
||||
this.delegate.setProperty(el, name, value);
|
||||
}
|
||||
}
|
||||
|
||||
listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => any):
|
||||
() => void {
|
||||
if (eventName.charAt(0) == '@') {
|
||||
const element = resolveElementFromTarget(target);
|
||||
const [name, phase] = parseTriggerCallbackName(eventName.substr(1));
|
||||
return this._engine.listen(
|
||||
element, namespaceify(this._namespaceId, name), phase, (event: any) => {
|
||||
const e = event as any;
|
||||
if (e.triggerName) {
|
||||
e.triggerName = deNamespaceify(this._namespaceId, e.triggerName);
|
||||
}
|
||||
this._zone.run(() => callback(event));
|
||||
});
|
||||
}
|
||||
return this.delegate.listen(target, eventName, callback);
|
||||
}
|
||||
|
||||
private _queueFlush() {
|
||||
if (!this._flushPromise) {
|
||||
this._zone.runOutsideAngular(() => {
|
||||
this._flushPromise = Promise.resolve(null).then(() => {
|
||||
this._flushPromise = null;
|
||||
this._engine.flush();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resolveElementFromTarget(target: 'window' | 'document' | 'body' | any): any {
|
||||
switch (target) {
|
||||
case 'body':
|
||||
return document.body;
|
||||
case 'document':
|
||||
return document;
|
||||
case 'window':
|
||||
return window;
|
||||
default:
|
||||
return target;
|
||||
}
|
||||
}
|
||||
|
||||
function parseTriggerCallbackName(triggerName: string) {
|
||||
const dotIndex = triggerName.indexOf('.');
|
||||
const trigger = triggerName.substring(0, dotIndex);
|
||||
const phase = triggerName.substr(dotIndex + 1);
|
||||
return [trigger, phase];
|
||||
}
|
||||
|
||||
function namespaceify(namespaceId: string, value: string): string {
|
||||
return `${namespaceId}#${value}`;
|
||||
}
|
||||
|
||||
function deNamespaceify(namespaceId: string, value: string): string {
|
||||
return value.replace(namespaceId + '#', '');
|
||||
}
|
||||
@ -0,0 +1,462 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationEvent, AnimationPlayer, AnimationTriggerMetadata, NoopAnimationPlayer, ɵAnimationGroupPlayer, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {AnimationTimelineInstruction} from '../dsl/animation_timeline_instruction';
|
||||
import {AnimationTransitionInstruction} from '../dsl/animation_transition_instruction';
|
||||
import {AnimationTrigger, buildTrigger} from '../dsl/animation_trigger';
|
||||
import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
|
||||
import {eraseStyles, setStyles} from '../util';
|
||||
|
||||
import {AnimationDriver} from './animation_driver';
|
||||
|
||||
export interface QueuedAnimationTransitionTuple {
|
||||
element: any;
|
||||
player: AnimationPlayer;
|
||||
triggerName: string;
|
||||
event: AnimationEvent;
|
||||
}
|
||||
|
||||
export interface TriggerListenerTuple {
|
||||
triggerName: string;
|
||||
phase: string;
|
||||
callback: (event: any) => any;
|
||||
}
|
||||
|
||||
const MARKED_FOR_ANIMATION = 'ng-animate';
|
||||
const MARKED_FOR_REMOVAL = '$$ngRemove';
|
||||
|
||||
export class DomAnimationEngine {
|
||||
private _flaggedInserts = new Set<any>();
|
||||
private _queuedRemovals = new Map<any, () => any>();
|
||||
private _queuedTransitionAnimations: QueuedAnimationTransitionTuple[] = [];
|
||||
private _activeTransitionAnimations = new Map<any, {[triggerName: string]: AnimationPlayer}>();
|
||||
private _activeElementAnimations = new Map<any, AnimationPlayer[]>();
|
||||
|
||||
private _elementTriggerStates = new Map<any, {[triggerName: string]: string}>();
|
||||
|
||||
private _triggers: {[triggerName: string]: AnimationTrigger} = Object.create(null);
|
||||
private _triggerListeners = new Map<any, TriggerListenerTuple[]>();
|
||||
|
||||
constructor(private _driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
|
||||
|
||||
get queuedPlayers(): AnimationPlayer[] {
|
||||
return this._queuedTransitionAnimations.map(q => q.player);
|
||||
}
|
||||
|
||||
get activePlayers(): AnimationPlayer[] {
|
||||
const players: AnimationPlayer[] = [];
|
||||
this._activeElementAnimations.forEach(activePlayers => players.push(...activePlayers));
|
||||
return players;
|
||||
}
|
||||
|
||||
registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
|
||||
name = name || trigger.name;
|
||||
if (this._triggers[name]) {
|
||||
return;
|
||||
}
|
||||
this._triggers[name] = buildTrigger(name, trigger.definitions);
|
||||
}
|
||||
|
||||
onInsert(element: any, domFn: () => any): void {
|
||||
this._flaggedInserts.add(element);
|
||||
domFn();
|
||||
}
|
||||
|
||||
onRemove(element: any, domFn: () => any): void {
|
||||
let lookupRef = this._elementTriggerStates.get(element);
|
||||
if (lookupRef) {
|
||||
const possibleTriggers = Object.keys(lookupRef);
|
||||
const hasRemoval = possibleTriggers.some(triggerName => {
|
||||
const oldValue = lookupRef[triggerName];
|
||||
const instruction = this._triggers[triggerName].matchTransition(oldValue, 'void');
|
||||
return !!instruction;
|
||||
});
|
||||
if (hasRemoval) {
|
||||
element[MARKED_FOR_REMOVAL] = true;
|
||||
this._queuedRemovals.set(element, domFn);
|
||||
return;
|
||||
}
|
||||
}
|
||||
domFn();
|
||||
}
|
||||
|
||||
setProperty(element: any, property: string, value: any): void {
|
||||
const trigger = this._triggers[property];
|
||||
if (!trigger) {
|
||||
throw new Error(`The provided animation trigger "${property}" has not been registered!`);
|
||||
}
|
||||
|
||||
let lookupRef = this._elementTriggerStates.get(element);
|
||||
if (!lookupRef) {
|
||||
this._elementTriggerStates.set(element, lookupRef = {});
|
||||
}
|
||||
|
||||
let oldValue = lookupRef[property] || 'void';
|
||||
if (oldValue != value) {
|
||||
let instruction = trigger.matchTransition(oldValue, value);
|
||||
if (!instruction) {
|
||||
// we do this to make sure we always have an animation player so
|
||||
// that callback operations are properly called
|
||||
instruction = trigger.createFallbackInstruction(oldValue, value);
|
||||
}
|
||||
this.animateTransition(element, instruction);
|
||||
lookupRef[property] = value;
|
||||
}
|
||||
}
|
||||
|
||||
listen(element: any, eventName: string, eventPhase: string, callback: (event: any) => any):
|
||||
() => void {
|
||||
if (!eventPhase) {
|
||||
throw new Error(
|
||||
`Unable to listen on the animation trigger "${eventName}" because the provided event is undefined!`);
|
||||
}
|
||||
if (!this._triggers[eventName]) {
|
||||
throw new Error(
|
||||
`Unable to listen on the animation trigger event "${eventPhase}" because the animation trigger "${eventName}" doesn't exist!`);
|
||||
}
|
||||
let elementListeners = this._triggerListeners.get(element);
|
||||
if (!elementListeners) {
|
||||
this._triggerListeners.set(element, elementListeners = []);
|
||||
}
|
||||
validatePlayerEvent(eventName, eventPhase);
|
||||
const tuple = <TriggerListenerTuple>{triggerName: eventName, phase: eventPhase, callback};
|
||||
elementListeners.push(tuple);
|
||||
return () => {
|
||||
const index = elementListeners.indexOf(tuple);
|
||||
if (index >= 0) {
|
||||
elementListeners.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private _onRemovalTransition(element: any): AnimationPlayer[] {
|
||||
// when a parent animation is set to trigger a removal we want to
|
||||
// find all of the children that are currently animating and clear
|
||||
// them out by destroying each of them.
|
||||
const elms = element.querySelectorAll(MARKED_FOR_ANIMATION);
|
||||
for (let i = 0; i < elms.length; i++) {
|
||||
const elm = elms[i];
|
||||
const activePlayers = this._activeElementAnimations.get(elm);
|
||||
if (activePlayers) {
|
||||
activePlayers.forEach(player => player.destroy());
|
||||
}
|
||||
|
||||
const activeTransitions = this._activeTransitionAnimations.get(elm);
|
||||
if (activeTransitions) {
|
||||
Object.keys(activeTransitions).forEach(triggerName => {
|
||||
const player = activeTransitions[triggerName];
|
||||
if (player) {
|
||||
player.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// we make a copy of the array because the actual source array is modified
|
||||
// each time a player is finished/destroyed (the forEach loop would fail otherwise)
|
||||
return copyArray(this._activeElementAnimations.get(element));
|
||||
}
|
||||
|
||||
animateTransition(element: any, instruction: AnimationTransitionInstruction): AnimationPlayer {
|
||||
const triggerName = instruction.triggerName;
|
||||
|
||||
let previousPlayers: AnimationPlayer[];
|
||||
if (instruction.isRemovalTransition) {
|
||||
previousPlayers = this._onRemovalTransition(element);
|
||||
} else {
|
||||
previousPlayers = [];
|
||||
const existingTransitions = this._activeTransitionAnimations.get(element);
|
||||
const existingPlayer = existingTransitions ? existingTransitions[triggerName] : null;
|
||||
if (existingPlayer) {
|
||||
previousPlayers.push(existingPlayer);
|
||||
}
|
||||
}
|
||||
|
||||
// it's important to do this step before destroying the players
|
||||
// so that the onDone callback below won't fire before this
|
||||
eraseStyles(element, instruction.fromStyles);
|
||||
|
||||
// we first run this so that the previous animation player
|
||||
// data can be passed into the successive animation players
|
||||
let totalTime = 0;
|
||||
const players = instruction.timelines.map(timelineInstruction => {
|
||||
totalTime = Math.max(totalTime, timelineInstruction.totalTime);
|
||||
return this._buildPlayer(element, timelineInstruction, previousPlayers);
|
||||
});
|
||||
|
||||
previousPlayers.forEach(previousPlayer => previousPlayer.destroy());
|
||||
const player = optimizeGroupPlayer(players);
|
||||
player.onDone(() => {
|
||||
player.destroy();
|
||||
const elmTransitionMap = this._activeTransitionAnimations.get(element);
|
||||
if (elmTransitionMap) {
|
||||
delete elmTransitionMap[triggerName];
|
||||
if (Object.keys(elmTransitionMap).length == 0) {
|
||||
this._activeTransitionAnimations.delete(element);
|
||||
}
|
||||
}
|
||||
deleteFromArrayMap(this._activeElementAnimations, element, player);
|
||||
setStyles(element, instruction.toStyles);
|
||||
});
|
||||
|
||||
const elmTransitionMap = getOrSetAsInMap(this._activeTransitionAnimations, element, {});
|
||||
elmTransitionMap[triggerName] = player;
|
||||
|
||||
this._queuePlayer(
|
||||
element, triggerName, player,
|
||||
makeAnimationEvent(
|
||||
element, triggerName, instruction.fromState, instruction.toState,
|
||||
null, // this will be filled in during event creation
|
||||
totalTime));
|
||||
|
||||
return player;
|
||||
}
|
||||
|
||||
public animateTimeline(
|
||||
element: any, instructions: AnimationTimelineInstruction[],
|
||||
previousPlayers: AnimationPlayer[] = []): AnimationPlayer {
|
||||
const players = instructions.map(instruction => {
|
||||
const player = this._buildPlayer(element, instruction, previousPlayers);
|
||||
player.onDestroy(
|
||||
() => { deleteFromArrayMap(this._activeElementAnimations, element, player); });
|
||||
player.init();
|
||||
|
||||
this._markPlayerAsActive(element, player);
|
||||
return player;
|
||||
});
|
||||
return optimizeGroupPlayer(players);
|
||||
}
|
||||
|
||||
private _buildPlayer(
|
||||
element: any, instruction: AnimationTimelineInstruction,
|
||||
previousPlayers: AnimationPlayer[]): AnimationPlayer {
|
||||
return this._driver.animate(
|
||||
element, this._normalizeKeyframes(instruction.keyframes), instruction.duration,
|
||||
instruction.delay, instruction.easing, previousPlayers);
|
||||
}
|
||||
|
||||
private _normalizeKeyframes(keyframes: ɵStyleData[]): ɵStyleData[] {
|
||||
const errors: string[] = [];
|
||||
const normalizedKeyframes: ɵStyleData[] = [];
|
||||
keyframes.forEach(kf => {
|
||||
const normalizedKeyframe: ɵStyleData = {};
|
||||
Object.keys(kf).forEach(prop => {
|
||||
let normalizedProp = prop;
|
||||
let normalizedValue = kf[prop];
|
||||
if (prop != 'offset') {
|
||||
normalizedProp = this._normalizer.normalizePropertyName(prop, errors);
|
||||
normalizedValue =
|
||||
this._normalizer.normalizeStyleValue(prop, normalizedProp, kf[prop], errors);
|
||||
}
|
||||
normalizedKeyframe[normalizedProp] = normalizedValue;
|
||||
});
|
||||
normalizedKeyframes.push(normalizedKeyframe);
|
||||
});
|
||||
if (errors.length) {
|
||||
const LINE_START = '\n - ';
|
||||
throw new Error(
|
||||
`Unable to animate due to the following errors:${LINE_START}${errors.join(LINE_START)}`);
|
||||
}
|
||||
return normalizedKeyframes;
|
||||
}
|
||||
|
||||
private _markPlayerAsActive(element: any, player: AnimationPlayer) {
|
||||
const elementAnimations = getOrSetAsInMap(this._activeElementAnimations, element, []);
|
||||
elementAnimations.push(player);
|
||||
}
|
||||
|
||||
private _queuePlayer(
|
||||
element: any, triggerName: string, player: AnimationPlayer, event: AnimationEvent) {
|
||||
const tuple = <QueuedAnimationTransitionTuple>{element, player, triggerName, event};
|
||||
this._queuedTransitionAnimations.push(tuple);
|
||||
player.init();
|
||||
|
||||
element.classList.add(MARKED_FOR_ANIMATION);
|
||||
player.onDone(() => { element.classList.remove(MARKED_FOR_ANIMATION); });
|
||||
}
|
||||
|
||||
private _flushQueuedAnimations() {
|
||||
parentLoop: while (this._queuedTransitionAnimations.length) {
|
||||
const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift();
|
||||
|
||||
let parent = element;
|
||||
while (parent = parent.parentNode) {
|
||||
// this means that a parent element will or will not
|
||||
// have its own animation operation which in this case
|
||||
// there's no point in even trying to do an animation
|
||||
if (parent[MARKED_FOR_REMOVAL]) continue parentLoop;
|
||||
}
|
||||
|
||||
// if a removal exists for the given element then we need cancel
|
||||
// all the queued players so that a proper removal animation can go
|
||||
if (this._queuedRemovals.has(element)) {
|
||||
player.destroy();
|
||||
continue;
|
||||
}
|
||||
|
||||
const listeners = this._triggerListeners.get(element);
|
||||
if (listeners) {
|
||||
listeners.forEach(tuple => {
|
||||
if (tuple.triggerName == triggerName) {
|
||||
listenOnPlayer(player, tuple.phase, event, tuple.callback);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this._markPlayerAsActive(element, player);
|
||||
|
||||
// in the event that an animation throws an error then we do
|
||||
// not want to re-run animations on any previous animations
|
||||
// if they have already been kicked off beforehand
|
||||
if (!player.hasStarted()) {
|
||||
player.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
flush() {
|
||||
this._flushQueuedAnimations();
|
||||
|
||||
let flushAgain = false;
|
||||
this._queuedRemovals.forEach((callback, element) => {
|
||||
// an item that was inserted/removed in the same flush means
|
||||
// that an animation should not happen anyway
|
||||
if (this._flaggedInserts.has(element)) return;
|
||||
|
||||
let parent = element;
|
||||
let players: AnimationPlayer[] = [];
|
||||
while (parent = parent.parentNode) {
|
||||
// there is no reason to even try to
|
||||
if (parent[MARKED_FOR_REMOVAL]) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
const match = this._activeElementAnimations.get(parent);
|
||||
if (match) {
|
||||
players.push(...match);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// the loop was unable to find an parent that is animating even
|
||||
// though this element has set to be removed, so the algorithm
|
||||
// should check to see if there are any triggers on the element
|
||||
// that are present to handle a leave animation and then setup
|
||||
// those players to facilitate the callback after done
|
||||
if (players.length == 0) {
|
||||
// this means that the element has valid state triggers
|
||||
const stateDetails = this._elementTriggerStates.get(element);
|
||||
if (stateDetails) {
|
||||
Object.keys(stateDetails).forEach(triggerName => {
|
||||
const oldValue = stateDetails[triggerName];
|
||||
const instruction = this._triggers[triggerName].matchTransition(oldValue, 'void');
|
||||
if (instruction) {
|
||||
players.push(this.animateTransition(element, instruction));
|
||||
flushAgain = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (players.length) {
|
||||
optimizeGroupPlayer(players).onDone(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
this._queuedRemovals.clear();
|
||||
this._flaggedInserts.clear();
|
||||
|
||||
// this means that one or more leave animations were detected
|
||||
if (flushAgain) {
|
||||
this._flushQueuedAnimations();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getOrSetAsInMap(map: Map<any, any>, key: any, defaultValue: any) {
|
||||
let value = map.get(key);
|
||||
if (!value) {
|
||||
map.set(key, value = defaultValue);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function deleteFromArrayMap(map: Map<any, any[]>, key: any, value: any) {
|
||||
let arr = map.get(key);
|
||||
if (arr) {
|
||||
const index = arr.indexOf(value);
|
||||
if (index >= 0) {
|
||||
arr.splice(index, 1);
|
||||
if (arr.length == 0) {
|
||||
map.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer {
|
||||
switch (players.length) {
|
||||
case 0:
|
||||
return new NoopAnimationPlayer();
|
||||
case 1:
|
||||
return players[0];
|
||||
default:
|
||||
return new ɵAnimationGroupPlayer(players);
|
||||
}
|
||||
}
|
||||
|
||||
function copyArray(source: any[]): any[] {
|
||||
return source ? source.splice(0) : [];
|
||||
}
|
||||
|
||||
function validatePlayerEvent(triggerName: string, eventName: string) {
|
||||
switch (eventName) {
|
||||
case 'start':
|
||||
case 'done':
|
||||
return;
|
||||
default:
|
||||
throw new Error(
|
||||
`The provided animation trigger event "${eventName}" for the animation trigger "${triggerName}" is not supported!`);
|
||||
}
|
||||
}
|
||||
|
||||
function listenOnPlayer(
|
||||
player: AnimationPlayer, eventName: string, baseEvent: AnimationEvent,
|
||||
callback: (event: any) => any) {
|
||||
switch (eventName) {
|
||||
case 'start':
|
||||
player.onStart(() => {
|
||||
const event = copyAnimationEvent(baseEvent);
|
||||
event.phaseName = 'start';
|
||||
callback(event);
|
||||
});
|
||||
break;
|
||||
case 'done':
|
||||
player.onDone(() => {
|
||||
const event = copyAnimationEvent(baseEvent);
|
||||
event.phaseName = 'done';
|
||||
callback(event);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function copyAnimationEvent(e: AnimationEvent): AnimationEvent {
|
||||
return makeAnimationEvent(
|
||||
e.element, e.triggerName, e.fromState, e.toState, e.phaseName, e.totalTime);
|
||||
}
|
||||
|
||||
function makeAnimationEvent(
|
||||
element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
|
||||
totalTime: number): AnimationEvent {
|
||||
return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationEvent, AnimationMetadataType, AnimationPlayer, AnimationStateMetadata, AnimationTriggerMetadata, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {AnimationEngine} from '../animation_engine';
|
||||
import {copyStyles, eraseStyles, normalizeStyles, setStyles} from '../util';
|
||||
|
||||
interface ListenerTuple {
|
||||
eventPhase: string;
|
||||
triggerName: string;
|
||||
callback: (event: any) => any;
|
||||
doRemove?: boolean;
|
||||
}
|
||||
|
||||
interface ChangeTuple {
|
||||
element: any;
|
||||
triggerName: string;
|
||||
oldValue: string;
|
||||
newValue: string;
|
||||
}
|
||||
|
||||
const DEFAULT_STATE_VALUE = 'void';
|
||||
const DEFAULT_STATE_STYLES = '*';
|
||||
|
||||
export class NoopAnimationEngine extends AnimationEngine {
|
||||
private _listeners = new Map<any, ListenerTuple[]>();
|
||||
private _changes: ChangeTuple[] = [];
|
||||
private _flaggedRemovals = new Set<any>();
|
||||
private _onDoneFns: (() => any)[] = [];
|
||||
private _triggerStyles: {[triggerName: string]: {[stateName: string]: ɵStyleData}} =
|
||||
Object.create(null);
|
||||
|
||||
registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
|
||||
name = name || trigger.name;
|
||||
if (this._triggerStyles[name]) {
|
||||
return;
|
||||
}
|
||||
const stateMap: {[stateName: string]: ɵStyleData} = {};
|
||||
trigger.definitions.forEach(def => {
|
||||
if (def.type === AnimationMetadataType.State) {
|
||||
const stateDef = def as AnimationStateMetadata;
|
||||
stateMap[stateDef.name] = normalizeStyles(stateDef.styles.styles);
|
||||
}
|
||||
});
|
||||
this._triggerStyles[name] = stateMap;
|
||||
}
|
||||
|
||||
onInsert(element: any, domFn: () => any): void { domFn(); }
|
||||
|
||||
onRemove(element: any, domFn: () => any): void {
|
||||
domFn();
|
||||
this._flaggedRemovals.add(element);
|
||||
}
|
||||
|
||||
setProperty(element: any, property: string, value: any): void {
|
||||
const storageProp = makeStorageProp(property);
|
||||
const oldValue = element[storageProp] || DEFAULT_STATE_VALUE;
|
||||
this._changes.push(<ChangeTuple>{element, oldValue, newValue: value, triggerName: property});
|
||||
|
||||
const triggerStateStyles = this._triggerStyles[property] || {};
|
||||
const fromStateStyles =
|
||||
triggerStateStyles[oldValue] || triggerStateStyles[DEFAULT_STATE_STYLES];
|
||||
if (fromStateStyles) {
|
||||
eraseStyles(element, fromStateStyles);
|
||||
}
|
||||
|
||||
element[storageProp] = value;
|
||||
this._onDoneFns.push(() => {
|
||||
const toStateStyles = triggerStateStyles[value] || triggerStateStyles[DEFAULT_STATE_STYLES];
|
||||
if (toStateStyles) {
|
||||
setStyles(element, toStateStyles);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listen(element: any, eventName: string, eventPhase: string, callback: (event: any) => any):
|
||||
() => any {
|
||||
let listeners = this._listeners.get(element);
|
||||
if (!listeners) {
|
||||
this._listeners.set(element, listeners = []);
|
||||
}
|
||||
|
||||
const tuple = <ListenerTuple>{triggerName: eventName, eventPhase, callback};
|
||||
listeners.push(tuple);
|
||||
|
||||
return () => tuple.doRemove = true;
|
||||
}
|
||||
|
||||
flush(): void {
|
||||
const onStartCallbacks: (() => any)[] = [];
|
||||
const onDoneCallbacks: (() => any)[] = [];
|
||||
|
||||
function handleListener(listener: ListenerTuple, data: ChangeTuple) {
|
||||
const phase = listener.eventPhase;
|
||||
const event = makeAnimationEvent(
|
||||
data.element, data.triggerName, data.oldValue, data.newValue, phase, 0);
|
||||
if (phase == 'start') {
|
||||
onStartCallbacks.push(() => listener.callback(event));
|
||||
} else if (phase == 'done') {
|
||||
onDoneCallbacks.push(() => listener.callback(event));
|
||||
}
|
||||
}
|
||||
|
||||
this._changes.forEach(change => {
|
||||
const element = change.element;
|
||||
const listeners = this._listeners.get(element);
|
||||
if (listeners) {
|
||||
listeners.forEach(listener => {
|
||||
if (listener.triggerName == change.triggerName) {
|
||||
handleListener(listener, change);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// upon removal ALL the animation triggers need to get fired
|
||||
this._flaggedRemovals.forEach(element => {
|
||||
const listeners = this._listeners.get(element);
|
||||
if (listeners) {
|
||||
listeners.forEach(listener => {
|
||||
const triggerName = listener.triggerName;
|
||||
const storageProp = makeStorageProp(triggerName);
|
||||
handleListener(listener, <ChangeTuple>{
|
||||
element: element,
|
||||
triggerName: triggerName,
|
||||
oldValue: element[storageProp] || DEFAULT_STATE_VALUE,
|
||||
newValue: DEFAULT_STATE_VALUE
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// remove all the listeners after everything is complete
|
||||
Array.from(this._listeners.keys()).forEach(element => {
|
||||
const listenersToKeep = this._listeners.get(element).filter(l => !l.doRemove);
|
||||
if (listenersToKeep.length) {
|
||||
this._listeners.set(element, listenersToKeep);
|
||||
} else {
|
||||
this._listeners.delete(element);
|
||||
}
|
||||
});
|
||||
|
||||
onStartCallbacks.forEach(fn => fn());
|
||||
onDoneCallbacks.forEach(fn => fn());
|
||||
this._flaggedRemovals.clear();
|
||||
this._changes = [];
|
||||
|
||||
this._onDoneFns.forEach(doneFn => doneFn());
|
||||
this._onDoneFns = [];
|
||||
}
|
||||
|
||||
get activePlayers(): AnimationPlayer[] { return []; }
|
||||
get queuedPlayers(): AnimationPlayer[] { return []; }
|
||||
}
|
||||
|
||||
function makeAnimationEvent(
|
||||
element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
|
||||
totalTime: number): AnimationEvent {
|
||||
return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
|
||||
}
|
||||
|
||||
function makeStorageProp(property: string): string {
|
||||
return '_@_' + property;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
export interface DOMAnimation {
|
||||
cancel(): void;
|
||||
play(): void;
|
||||
pause(): void;
|
||||
finish(): void;
|
||||
onfinish: Function;
|
||||
position: number;
|
||||
currentTime: number;
|
||||
addEventListener(eventName: string, handler: (event: any) => any): any;
|
||||
dispatchEvent(eventName: string): any;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationPlayer, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {AnimationDriver} from '../animation_driver';
|
||||
|
||||
import {WebAnimationsPlayer} from './web_animations_player';
|
||||
|
||||
export class WebAnimationsDriver implements AnimationDriver {
|
||||
animate(
|
||||
element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string,
|
||||
previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
|
||||
const playerOptions: {[key: string]: string |
|
||||
number} = {'duration': duration, 'delay': delay, 'fill': 'forwards'};
|
||||
|
||||
// we check for this to avoid having a null|undefined value be present
|
||||
// for the easing (which results in an error for certain browsers #9752)
|
||||
if (easing) {
|
||||
playerOptions['easing'] = easing;
|
||||
}
|
||||
|
||||
const previousWebAnimationPlayers = <WebAnimationsPlayer[]>previousPlayers.filter(
|
||||
player => { return player instanceof WebAnimationsPlayer; });
|
||||
return new WebAnimationsPlayer(element, keyframes, playerOptions, previousWebAnimationPlayers);
|
||||
}
|
||||
}
|
||||
|
||||
export function supportsWebAnimations() {
|
||||
return typeof Element !== 'undefined' && typeof(<any>Element).prototype['animate'] === 'function';
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AUTO_STYLE, AnimationPlayer} from '@angular/animations';
|
||||
import {DOMAnimation} from './dom_animation';
|
||||
|
||||
export class WebAnimationsPlayer implements AnimationPlayer {
|
||||
private _onDoneFns: Function[] = [];
|
||||
private _onStartFns: Function[] = [];
|
||||
private _onDestroyFns: Function[] = [];
|
||||
private _player: DOMAnimation;
|
||||
private _duration: number;
|
||||
private _delay: number;
|
||||
private _initialized = false;
|
||||
private _finished = false;
|
||||
private _started = false;
|
||||
private _destroyed = false;
|
||||
private _finalKeyframe: {[key: string]: string | number};
|
||||
public time = 0;
|
||||
|
||||
public parentPlayer: AnimationPlayer = null;
|
||||
public previousStyles: {[styleName: string]: string | number};
|
||||
|
||||
constructor(
|
||||
public element: any, public keyframes: {[key: string]: string | number}[],
|
||||
public options: {[key: string]: string | number},
|
||||
previousPlayers: WebAnimationsPlayer[] = []) {
|
||||
this._duration = <number>options['duration'];
|
||||
this._delay = <number>options['delay'] || 0;
|
||||
this.time = this._duration + this._delay;
|
||||
|
||||
this.previousStyles = {};
|
||||
previousPlayers.forEach(player => {
|
||||
let styles = player._captureStyles();
|
||||
Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
|
||||
});
|
||||
}
|
||||
|
||||
private _onFinish() {
|
||||
if (!this._finished) {
|
||||
this._finished = true;
|
||||
this._onDoneFns.forEach(fn => fn());
|
||||
this._onDoneFns = [];
|
||||
}
|
||||
}
|
||||
|
||||
init(): void {
|
||||
if (this._initialized) return;
|
||||
this._initialized = true;
|
||||
|
||||
const keyframes = this.keyframes.map(styles => {
|
||||
const formattedKeyframe: {[key: string]: string | number} = {};
|
||||
Object.keys(styles).forEach((prop, index) => {
|
||||
let value = styles[prop];
|
||||
if (value == AUTO_STYLE) {
|
||||
value = _computeStyle(this.element, prop);
|
||||
}
|
||||
if (value != undefined) {
|
||||
formattedKeyframe[prop] = value;
|
||||
}
|
||||
});
|
||||
return formattedKeyframe;
|
||||
});
|
||||
|
||||
const previousStyleProps = Object.keys(this.previousStyles);
|
||||
if (previousStyleProps.length) {
|
||||
let startingKeyframe = keyframes[0];
|
||||
let missingStyleProps: string[] = [];
|
||||
previousStyleProps.forEach(prop => {
|
||||
if (startingKeyframe[prop] != null) {
|
||||
missingStyleProps.push(prop);
|
||||
}
|
||||
startingKeyframe[prop] = this.previousStyles[prop];
|
||||
});
|
||||
|
||||
if (missingStyleProps.length) {
|
||||
const self = this;
|
||||
// tslint:disable-next-line
|
||||
for (var i = 1; i < keyframes.length; i++) {
|
||||
let kf = keyframes[i];
|
||||
missingStyleProps.forEach(function(prop) {
|
||||
kf[prop] = _computeStyle(self.element, prop);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
|
||||
this._finalKeyframe =
|
||||
keyframes.length ? _copyKeyframeStyles(keyframes[keyframes.length - 1]) : {};
|
||||
|
||||
// this is required so that the player doesn't start to animate right away
|
||||
this._resetDomPlayerState();
|
||||
this._player.addEventListener('finish', () => this._onFinish());
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
_triggerWebAnimation(element: any, keyframes: any[], options: any): DOMAnimation {
|
||||
// jscompiler doesn't seem to know animate is a native property because it's not fully
|
||||
// supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
|
||||
return <DOMAnimation>element['animate'](keyframes, options);
|
||||
}
|
||||
|
||||
get domPlayer() { return this._player; }
|
||||
|
||||
onStart(fn: () => void): void { this._onStartFns.push(fn); }
|
||||
|
||||
onDone(fn: () => void): void { this._onDoneFns.push(fn); }
|
||||
|
||||
onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
|
||||
|
||||
play(): void {
|
||||
this.init();
|
||||
if (!this.hasStarted()) {
|
||||
this._onStartFns.forEach(fn => fn());
|
||||
this._onStartFns = [];
|
||||
this._started = true;
|
||||
}
|
||||
this._player.play();
|
||||
}
|
||||
|
||||
pause(): void {
|
||||
this.init();
|
||||
this._player.pause();
|
||||
}
|
||||
|
||||
finish(): void {
|
||||
this.init();
|
||||
this._onFinish();
|
||||
this._player.finish();
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
this._resetDomPlayerState();
|
||||
this._destroyed = false;
|
||||
this._finished = false;
|
||||
this._started = false;
|
||||
}
|
||||
|
||||
private _resetDomPlayerState() {
|
||||
if (this._player) {
|
||||
this._player.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
restart(): void {
|
||||
this.reset();
|
||||
this.play();
|
||||
}
|
||||
|
||||
hasStarted(): boolean { return this._started; }
|
||||
|
||||
destroy(): void {
|
||||
if (!this._destroyed) {
|
||||
this._resetDomPlayerState();
|
||||
this._onFinish();
|
||||
this._destroyed = true;
|
||||
this._onDestroyFns.forEach(fn => fn());
|
||||
this._onDestroyFns = [];
|
||||
}
|
||||
}
|
||||
|
||||
setPosition(p: number): void { this._player.currentTime = p * this.time; }
|
||||
|
||||
getPosition(): number { return this._player.currentTime / this.time; }
|
||||
|
||||
private _captureStyles(): {[prop: string]: string | number} {
|
||||
const styles: {[key: string]: string | number} = {};
|
||||
if (this.hasStarted()) {
|
||||
Object.keys(this._finalKeyframe).forEach(prop => {
|
||||
if (prop != 'offset') {
|
||||
styles[prop] =
|
||||
this._finished ? this._finalKeyframe[prop] : _computeStyle(this.element, prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return styles;
|
||||
}
|
||||
}
|
||||
|
||||
function _computeStyle(element: any, prop: string): string {
|
||||
return (<any>window.getComputedStyle(element))[prop];
|
||||
}
|
||||
|
||||
function _copyKeyframeStyles(styles: {[style: string]: string | number}):
|
||||
{[style: string]: string | number} {
|
||||
const newStyles: {[style: string]: string | number} = {};
|
||||
Object.keys(styles).forEach(prop => {
|
||||
if (prop != 'offset') {
|
||||
newStyles[prop] = styles[prop];
|
||||
}
|
||||
});
|
||||
return newStyles;
|
||||
}
|
||||
91
packages/platform-browser/animations/src/util.ts
Normal file
91
packages/platform-browser/animations/src/util.ts
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimateTimings, ɵStyleData} from '@angular/animations';
|
||||
|
||||
export const ONE_SECOND = 1000;
|
||||
|
||||
export function parseTimeExpression(exp: string | number, errors: string[]): AnimateTimings {
|
||||
const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
|
||||
let duration: number;
|
||||
let delay: number = 0;
|
||||
let easing: string = null;
|
||||
if (typeof exp === 'string') {
|
||||
const matches = exp.match(regex);
|
||||
if (matches === null) {
|
||||
errors.push(`The provided timing value "${exp}" is invalid.`);
|
||||
return {duration: 0, delay: 0, easing: null};
|
||||
}
|
||||
|
||||
let durationMatch = parseFloat(matches[1]);
|
||||
const durationUnit = matches[2];
|
||||
if (durationUnit == 's') {
|
||||
durationMatch *= ONE_SECOND;
|
||||
}
|
||||
duration = Math.floor(durationMatch);
|
||||
|
||||
const delayMatch = matches[3];
|
||||
const delayUnit = matches[4];
|
||||
if (delayMatch != null) {
|
||||
let delayVal: number = parseFloat(delayMatch);
|
||||
if (delayUnit != null && delayUnit == 's') {
|
||||
delayVal *= ONE_SECOND;
|
||||
}
|
||||
delay = Math.floor(delayVal);
|
||||
}
|
||||
|
||||
const easingVal = matches[5];
|
||||
if (easingVal) {
|
||||
easing = easingVal;
|
||||
}
|
||||
} else {
|
||||
duration = <number>exp;
|
||||
}
|
||||
|
||||
return {duration, delay, easing};
|
||||
}
|
||||
|
||||
export function normalizeStyles(styles: ɵStyleData | ɵStyleData[]): ɵStyleData {
|
||||
const normalizedStyles: ɵStyleData = {};
|
||||
if (Array.isArray(styles)) {
|
||||
styles.forEach(data => copyStyles(data, false, normalizedStyles));
|
||||
} else {
|
||||
copyStyles(styles, false, normalizedStyles);
|
||||
}
|
||||
return normalizedStyles;
|
||||
}
|
||||
|
||||
export function copyStyles(
|
||||
styles: ɵStyleData, readPrototype: boolean, destination: ɵStyleData = {}): ɵStyleData {
|
||||
if (readPrototype) {
|
||||
// we make use of a for-in loop so that the
|
||||
// prototypically inherited properties are
|
||||
// revealed from the backFill map
|
||||
for (let prop in styles) {
|
||||
destination[prop] = styles[prop];
|
||||
}
|
||||
} else {
|
||||
Object.keys(styles).forEach(prop => destination[prop] = styles[prop]);
|
||||
}
|
||||
return destination;
|
||||
}
|
||||
|
||||
export function setStyles(element: any, styles: ɵStyleData) {
|
||||
if (element['style']) {
|
||||
Object.keys(styles).forEach(prop => element.style[prop] = styles[prop]);
|
||||
}
|
||||
}
|
||||
|
||||
export function eraseStyles(element: any, styles: ɵStyleData) {
|
||||
if (element['style']) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
// IE requires '' instead of null
|
||||
// see https://github.com/angular/angular/issues/7916
|
||||
element.style[prop] = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
643
packages/platform-browser/animations/test/dsl/animation_spec.ts
Normal file
643
packages/platform-browser/animations/test/dsl/animation_spec.ts
Normal file
@ -0,0 +1,643 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, group, keyframes, sequence, style, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {Animation} from '../../src/dsl/animation';
|
||||
import {AnimationTimelineInstruction} from '../../src/dsl/animation_timeline_instruction';
|
||||
import {validateAnimationSequence} from '../../src/dsl/animation_validator_visitor';
|
||||
|
||||
export function main() {
|
||||
describe('Animation', () => {
|
||||
describe('validation', () => {
|
||||
it('should throw an error if one or more but not all keyframes() styles contain offsets',
|
||||
() => {
|
||||
const steps = animate(1000, keyframes([
|
||||
style({opacity: 0}),
|
||||
style({opacity: 1, offset: 1}),
|
||||
]));
|
||||
|
||||
expect(() => { validateAndThrowAnimationSequence(steps); })
|
||||
.toThrowError(
|
||||
/Not all style\(\) steps within the declared keyframes\(\) contain offsets/);
|
||||
});
|
||||
|
||||
it('should throw an error if not all offsets are between 0 and 1', () => {
|
||||
let steps = animate(1000, keyframes([
|
||||
style({opacity: 0, offset: -1}),
|
||||
style({opacity: 1, offset: 1}),
|
||||
]));
|
||||
|
||||
expect(() => {
|
||||
validateAndThrowAnimationSequence(steps);
|
||||
}).toThrowError(/Please ensure that all keyframe offsets are between 0 and 1/);
|
||||
|
||||
steps = animate(1000, keyframes([
|
||||
style({opacity: 0, offset: 0}),
|
||||
style({opacity: 1, offset: 1.1}),
|
||||
]));
|
||||
|
||||
expect(() => {
|
||||
validateAndThrowAnimationSequence(steps);
|
||||
}).toThrowError(/Please ensure that all keyframe offsets are between 0 and 1/);
|
||||
});
|
||||
|
||||
it('should throw an error if a smaller offset shows up after a bigger one', () => {
|
||||
let steps = animate(1000, keyframes([
|
||||
style({opacity: 0, offset: 1}),
|
||||
style({opacity: 1, offset: 0}),
|
||||
]));
|
||||
|
||||
expect(() => {
|
||||
validateAndThrowAnimationSequence(steps);
|
||||
}).toThrowError(/Please ensure that all keyframe offsets are in order/);
|
||||
});
|
||||
|
||||
it('should throw an error if any styles overlap during parallel animations', () => {
|
||||
const steps = group([
|
||||
sequence([
|
||||
// 0 -> 2000ms
|
||||
style({opacity: 0}), animate('500ms', style({opacity: .25})),
|
||||
animate('500ms', style({opacity: .5})), animate('500ms', style({opacity: .75})),
|
||||
animate('500ms', style({opacity: 1}))
|
||||
]),
|
||||
animate('1s 500ms', keyframes([
|
||||
// 0 -> 1500ms
|
||||
style({width: 0}),
|
||||
style({opacity: 1, width: 1000}),
|
||||
]))
|
||||
]);
|
||||
|
||||
expect(() => { validateAndThrowAnimationSequence(steps); })
|
||||
.toThrowError(
|
||||
/The CSS property "opacity" that exists between the times of "0ms" and "2000ms" is also being animated in a parallel animation between the times of "0ms" and "1500ms"/);
|
||||
});
|
||||
|
||||
it('should throw an error if an animation time is invalid', () => {
|
||||
const steps = [animate('500xs', style({opacity: 1}))];
|
||||
|
||||
expect(() => {
|
||||
validateAndThrowAnimationSequence(steps);
|
||||
}).toThrowError(/The provided timing value "500xs" is invalid/);
|
||||
|
||||
const steps2 = [animate('500ms 500ms 500ms ease-out', style({opacity: 1}))];
|
||||
|
||||
expect(() => {
|
||||
validateAndThrowAnimationSequence(steps2);
|
||||
}).toThrowError(/The provided timing value "500ms 500ms 500ms ease-out" is invalid/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('keyframe building', () => {
|
||||
describe('style() / animate()', () => {
|
||||
it('should produce a balanced series of keyframes given a sequence of animate steps',
|
||||
() => {
|
||||
const steps = [
|
||||
style({width: 0}), animate(1000, style({height: 50})),
|
||||
animate(1000, style({width: 100})), animate(1000, style({height: 150})),
|
||||
animate(1000, style({width: 200}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players[0].keyframes).toEqual([
|
||||
{height: AUTO_STYLE, width: 0, offset: 0},
|
||||
{height: 50, width: 0, offset: .25},
|
||||
{height: 50, width: 100, offset: .5},
|
||||
{height: 150, width: 100, offset: .75},
|
||||
{height: 150, width: 200, offset: 1},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should fill in missing starting steps when a starting `style()` value is not used',
|
||||
() => {
|
||||
const steps = [animate(1000, style({width: 999}))];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players[0].keyframes).toEqual([
|
||||
{width: AUTO_STYLE, offset: 0}, {width: 999, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should merge successive style() calls together before an animate() call', () => {
|
||||
const steps = [
|
||||
style({width: 0}), style({height: 0}), style({width: 200}), style({opacity: 0}),
|
||||
animate(1000, style({width: 100, height: 400, opacity: 1}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players[0].keyframes).toEqual([
|
||||
{width: 200, height: 0, opacity: 0, offset: 0},
|
||||
{width: 100, height: 400, opacity: 1, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should not merge in successive style() calls to the previous animate() keyframe',
|
||||
() => {
|
||||
const steps = [
|
||||
style({opacity: 0}), animate(1000, style({opacity: .5})), style({opacity: .6}),
|
||||
animate(1000, style({opacity: 1}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
const keyframes = humanizeOffsets(players[0].keyframes, 4);
|
||||
|
||||
expect(keyframes).toEqual([
|
||||
{opacity: 0, offset: 0},
|
||||
{opacity: .5, offset: .4998},
|
||||
{opacity: .6, offset: .5002},
|
||||
{opacity: 1, offset: 1},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should support an easing value that uses cubic-bezier(...)', () => {
|
||||
const steps = [
|
||||
style({opacity: 0}),
|
||||
animate('1s cubic-bezier(.29, .55 ,.53 ,1.53)', style({opacity: 1}))
|
||||
];
|
||||
|
||||
const player = invokeAnimationSequence(steps)[0];
|
||||
const lastKeyframe = player.keyframes[1];
|
||||
const lastKeyframeEasing = <string>lastKeyframe['easing'];
|
||||
expect(lastKeyframeEasing.replace(/\s+/g, '')).toEqual('cubic-bezier(.29,.55,.53,1.53)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sequence()', () => {
|
||||
it('should not produce extra timelines when multiple sequences are used within each other',
|
||||
() => {
|
||||
const steps = [
|
||||
style({width: 0}), animate(1000, style({width: 100})), sequence([
|
||||
animate(1000, style({width: 200})),
|
||||
sequence([animate(1000, style({width: 300}))])
|
||||
]),
|
||||
animate(1000, style({width: 400})), sequence([animate(1000, style({width: 500}))])
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players[0].keyframes).toEqual([
|
||||
{width: 0, offset: 0}, {width: 100, offset: .2}, {width: 200, offset: .4},
|
||||
{width: 300, offset: .6}, {width: 400, offset: .8}, {width: 500, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should produce a 1ms animation step if a style call exists before sequence within a call to animate()',
|
||||
() => {
|
||||
const steps = [
|
||||
style({width: 100}), sequence([
|
||||
animate(1000, style({width: 200})),
|
||||
])
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(humanizeOffsets(players[0].keyframes, 4)).toEqual([
|
||||
{width: 100, offset: 0}, {width: 100, offset: .001}, {width: 200, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should create a new timeline after a sequence if group() or keyframe() commands are used within',
|
||||
() => {
|
||||
const steps = [
|
||||
style({width: 100, height: 100}), animate(1000, style({width: 150, height: 150})),
|
||||
sequence([
|
||||
group([
|
||||
animate(1000, style({height: 200})),
|
||||
]),
|
||||
animate(1000, keyframes([style({width: 180}), style({width: 200})]))
|
||||
]),
|
||||
animate(1000, style({width: 500, height: 500}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(4);
|
||||
|
||||
const finalPlayer = players[players.length - 1];
|
||||
expect(finalPlayer.keyframes).toEqual([
|
||||
{width: 200, height: 200, offset: 0}, {width: 500, height: 500, offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('keyframes()', () => {
|
||||
it('should produce a sub timeline when `keyframes()` is used within a sequence', () => {
|
||||
const steps = [
|
||||
animate(1000, style({opacity: .5})), animate(1000, style({opacity: 1})),
|
||||
animate(
|
||||
1000, keyframes([style({height: 0}), style({height: 100}), style({height: 50})])),
|
||||
animate(1000, style({height: 0, opacity: 0}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(3);
|
||||
|
||||
const player0 = players[0];
|
||||
expect(player0.delay).toEqual(0);
|
||||
expect(player0.keyframes).toEqual([
|
||||
{opacity: AUTO_STYLE, offset: 0},
|
||||
{opacity: .5, offset: .5},
|
||||
{opacity: 1, offset: 1},
|
||||
]);
|
||||
|
||||
const subPlayer = players[1];
|
||||
expect(subPlayer.delay).toEqual(2000);
|
||||
expect(subPlayer.keyframes).toEqual([
|
||||
{height: 0, offset: 0},
|
||||
{height: 100, offset: .5},
|
||||
{height: 50, offset: 1},
|
||||
]);
|
||||
|
||||
const player1 = players[2];
|
||||
expect(player1.delay).toEqual(3000);
|
||||
expect(player1.keyframes).toEqual([
|
||||
{opacity: 1, height: 50, offset: 0}, {opacity: 0, height: 0, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should propagate inner keyframe style data to the parent timeline if used afterwards',
|
||||
() => {
|
||||
const steps = [
|
||||
style({opacity: 0}), animate(1000, style({opacity: .5})),
|
||||
animate(1000, style({opacity: 1})), animate(1000, keyframes([
|
||||
style({color: 'red'}),
|
||||
style({color: 'blue'}),
|
||||
])),
|
||||
animate(1000, style({color: 'green', opacity: 0}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
const finalPlayer = players[players.length - 1];
|
||||
expect(finalPlayer.keyframes).toEqual([
|
||||
{opacity: 1, color: 'blue', offset: 0}, {opacity: 0, color: 'green', offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should feed in starting data into inner keyframes if used in an style step beforehand',
|
||||
() => {
|
||||
const steps = [
|
||||
animate(1000, style({opacity: .5})), animate(1000, keyframes([
|
||||
style({opacity: .8, offset: .5}),
|
||||
style({opacity: 1, offset: 1}),
|
||||
]))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(2);
|
||||
|
||||
const topPlayer = players[0];
|
||||
expect(topPlayer.keyframes).toEqual([
|
||||
{opacity: AUTO_STYLE, offset: 0}, {opacity: .5, offset: 1}
|
||||
]);
|
||||
|
||||
const subPlayer = players[1];
|
||||
expect(subPlayer.keyframes).toEqual([
|
||||
{opacity: .5, offset: 0}, {opacity: .8, offset: 0.5}, {opacity: 1, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should set the easing value as an easing value for the entire timeline', () => {
|
||||
const steps = [
|
||||
style({opacity: 0}), animate(1000, style({opacity: .5})),
|
||||
animate(
|
||||
'1s ease-out',
|
||||
keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
|
||||
];
|
||||
|
||||
const player = invokeAnimationSequence(steps)[1];
|
||||
expect(player.easing).toEqual('ease-out');
|
||||
});
|
||||
|
||||
it('should combine the starting time + the given delay as the delay value for the animated keyframes',
|
||||
() => {
|
||||
const steps = [
|
||||
style({opacity: 0}), animate(500, style({opacity: .5})),
|
||||
animate(
|
||||
'1s 2s ease-out',
|
||||
keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
|
||||
];
|
||||
|
||||
const player = invokeAnimationSequence(steps)[1];
|
||||
expect(player.delay).toEqual(2500);
|
||||
});
|
||||
|
||||
it('should not leak in additional styles used later on after keyframe styles have already been declared',
|
||||
() => {
|
||||
const steps = [
|
||||
animate(1000, style({height: '50px'})),
|
||||
animate(
|
||||
2000, keyframes([
|
||||
style({left: '0', transform: 'rotate(0deg)', offset: 0}),
|
||||
style({
|
||||
left: '40%',
|
||||
transform: 'rotate(250deg) translateY(-200px)',
|
||||
offset: .33
|
||||
}),
|
||||
style(
|
||||
{left: '60%', transform: 'rotate(180deg) translateY(200px)', offset: .66}),
|
||||
style({left: 'calc(100% - 100px)', transform: 'rotate(0deg)', offset: 1}),
|
||||
])),
|
||||
group([animate('2s', style({width: '200px'}))]),
|
||||
animate('2s', style({height: '300px'})),
|
||||
group([animate('2s', style({height: '500px', width: '500px'}))])
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(5);
|
||||
|
||||
const firstPlayerKeyframes = players[0].keyframes;
|
||||
expect(firstPlayerKeyframes[0]['width']).toBeFalsy();
|
||||
expect(firstPlayerKeyframes[1]['width']).toBeFalsy();
|
||||
expect(firstPlayerKeyframes[0]['height']).toEqual(AUTO_STYLE);
|
||||
expect(firstPlayerKeyframes[1]['height']).toEqual('50px');
|
||||
|
||||
const keyframePlayerKeyframes = players[1].keyframes;
|
||||
expect(keyframePlayerKeyframes[0]['width']).toBeFalsy();
|
||||
expect(keyframePlayerKeyframes[0]['height']).toBeFalsy();
|
||||
|
||||
const groupPlayerKeyframes = players[2].keyframes;
|
||||
expect(groupPlayerKeyframes[0]['width']).toEqual(AUTO_STYLE);
|
||||
expect(groupPlayerKeyframes[1]['width']).toEqual('200px');
|
||||
expect(groupPlayerKeyframes[0]['height']).toBeFalsy();
|
||||
expect(groupPlayerKeyframes[1]['height']).toBeFalsy();
|
||||
|
||||
const secondToFinalAnimatePlayerKeyframes = players[3].keyframes;
|
||||
expect(secondToFinalAnimatePlayerKeyframes[0]['width']).toBeFalsy();
|
||||
expect(secondToFinalAnimatePlayerKeyframes[1]['width']).toBeFalsy();
|
||||
expect(secondToFinalAnimatePlayerKeyframes[0]['height']).toEqual('50px');
|
||||
expect(secondToFinalAnimatePlayerKeyframes[1]['height']).toEqual('300px');
|
||||
|
||||
const finalAnimatePlayerKeyframes = players[4].keyframes;
|
||||
expect(finalAnimatePlayerKeyframes[0]['width']).toEqual('200px');
|
||||
expect(finalAnimatePlayerKeyframes[1]['width']).toEqual('500px');
|
||||
expect(finalAnimatePlayerKeyframes[0]['height']).toEqual('300px');
|
||||
expect(finalAnimatePlayerKeyframes[1]['height']).toEqual('500px');
|
||||
});
|
||||
|
||||
it('should respect offsets if provided directly within the style data', () => {
|
||||
const steps = animate(1000, keyframes([
|
||||
style({opacity: 0, offset: 0}), style({opacity: .6, offset: .6}),
|
||||
style({opacity: 1, offset: 1})
|
||||
]));
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(1);
|
||||
const player = players[0];
|
||||
|
||||
expect(player.keyframes).toEqual([
|
||||
{opacity: 0, offset: 0}, {opacity: .6, offset: .6}, {opacity: 1, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should respect offsets if provided directly within the style metadata type', () => {
|
||||
const steps =
|
||||
animate(1000, keyframes([
|
||||
{type: AnimationMetadataType.Style, offset: 0, styles: {opacity: 0}},
|
||||
{type: AnimationMetadataType.Style, offset: .4, styles: {opacity: .4}},
|
||||
{type: AnimationMetadataType.Style, offset: 1, styles: {opacity: 1}},
|
||||
]));
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(1);
|
||||
const player = players[0];
|
||||
|
||||
expect(player.keyframes).toEqual([
|
||||
{opacity: 0, offset: 0}, {opacity: .4, offset: .4}, {opacity: 1, offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('group()', () => {
|
||||
it('should properly tally style data within a group() for use in a follow-up animate() step',
|
||||
() => {
|
||||
const steps = [
|
||||
style({width: 0, height: 0}), animate(1000, style({width: 20, height: 50})),
|
||||
group([animate('1s 1s', style({width: 200})), animate('1s', style({height: 500}))]),
|
||||
animate(1000, style({width: 1000, height: 1000}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(4);
|
||||
|
||||
const player0 = players[0];
|
||||
expect(player0.duration).toEqual(1000);
|
||||
expect(player0.keyframes).toEqual([
|
||||
{width: 0, height: 0, offset: 0}, {width: 20, height: 50, offset: 1}
|
||||
]);
|
||||
|
||||
const gPlayer1 = players[1];
|
||||
expect(gPlayer1.duration).toEqual(2000);
|
||||
expect(gPlayer1.delay).toEqual(1000);
|
||||
expect(gPlayer1.keyframes).toEqual([
|
||||
{width: 20, offset: 0}, {width: 20, offset: .5}, {width: 200, offset: 1}
|
||||
]);
|
||||
|
||||
const gPlayer2 = players[2];
|
||||
expect(gPlayer2.duration).toEqual(1000);
|
||||
expect(gPlayer2.delay).toEqual(1000);
|
||||
expect(gPlayer2.keyframes).toEqual([
|
||||
{height: 50, offset: 0}, {height: 500, offset: 1}
|
||||
]);
|
||||
|
||||
const player1 = players[3];
|
||||
expect(player1.duration).toEqual(1000);
|
||||
expect(player1.delay).toEqual(3000);
|
||||
expect(player1.keyframes).toEqual([
|
||||
{width: 200, height: 500, offset: 0}, {width: 1000, height: 1000, offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should support groups with nested sequences', () => {
|
||||
const steps = [group([
|
||||
sequence([
|
||||
style({opacity: 0}),
|
||||
animate(1000, style({opacity: 1})),
|
||||
]),
|
||||
sequence([
|
||||
style({width: 0}),
|
||||
animate(1000, style({width: 200})),
|
||||
])
|
||||
])];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(2);
|
||||
|
||||
const gPlayer1 = players[0];
|
||||
expect(gPlayer1.delay).toEqual(0);
|
||||
expect(gPlayer1.keyframes).toEqual([
|
||||
{opacity: 0, offset: 0},
|
||||
{opacity: 1, offset: 1},
|
||||
]);
|
||||
|
||||
const gPlayer2 = players[1];
|
||||
expect(gPlayer1.delay).toEqual(0);
|
||||
expect(gPlayer2.keyframes).toEqual([{width: 0, offset: 0}, {width: 200, offset: 1}]);
|
||||
});
|
||||
|
||||
it('should respect delays after group entries', () => {
|
||||
const steps = [
|
||||
style({width: 0, height: 0}), animate(1000, style({width: 50, height: 50})), group([
|
||||
animate(1000, style({width: 100})),
|
||||
animate(1000, style({height: 100})),
|
||||
]),
|
||||
animate('1s 1s', style({height: 200, width: 200}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(4);
|
||||
|
||||
const finalPlayer = players[players.length - 1];
|
||||
expect(finalPlayer.delay).toEqual(2000);
|
||||
expect(finalPlayer.duration).toEqual(2000);
|
||||
expect(finalPlayer.keyframes).toEqual([
|
||||
{width: 100, height: 100, offset: 0},
|
||||
{width: 100, height: 100, offset: .5},
|
||||
{width: 200, height: 200, offset: 1},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should respect delays after multiple calls to group()', () => {
|
||||
const steps = [
|
||||
group([animate('2s', style({opacity: 1})), animate('2s', style({width: '100px'}))]),
|
||||
animate(2000, style({width: 0, opacity: 0})),
|
||||
group([animate('2s', style({opacity: 1})), animate('2s', style({width: '200px'}))]),
|
||||
animate(2000, style({width: 0, opacity: 0}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
const middlePlayer = players[2];
|
||||
expect(middlePlayer.delay).toEqual(2000);
|
||||
expect(middlePlayer.duration).toEqual(2000);
|
||||
|
||||
const finalPlayer = players[players.length - 1];
|
||||
expect(finalPlayer.delay).toEqual(6000);
|
||||
expect(finalPlayer.duration).toEqual(2000);
|
||||
});
|
||||
});
|
||||
|
||||
describe('timing values', () => {
|
||||
it('should properly combine an easing value with a delay into a set of three keyframes',
|
||||
() => {
|
||||
const steps: AnimationMetadata[] =
|
||||
[style({opacity: 0}), animate('3s 1s ease-out', style({opacity: 1}))];
|
||||
|
||||
const player = invokeAnimationSequence(steps)[0];
|
||||
expect(player.keyframes).toEqual([
|
||||
{opacity: 0, offset: 0}, {opacity: 0, offset: .25},
|
||||
{opacity: 1, offset: 1, easing: 'ease-out'}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should allow easing values to exist for each animate() step', () => {
|
||||
const steps: AnimationMetadata[] = [
|
||||
style({width: 0}), animate('1s linear', style({width: 10})),
|
||||
animate('2s ease-out', style({width: 20})), animate('1s ease-in', style({width: 30}))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players.length).toEqual(1);
|
||||
|
||||
const player = players[0];
|
||||
expect(player.keyframes).toEqual([
|
||||
{width: 0, offset: 0}, {width: 10, offset: .25, easing: 'linear'},
|
||||
{width: 20, offset: .75, easing: 'ease-out'},
|
||||
{width: 30, offset: 1, easing: 'ease-in'}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should produce a top-level timeline only for the duration that is set as before a group kicks in',
|
||||
() => {
|
||||
const steps: AnimationMetadata[] = [
|
||||
style({width: 0, height: 0, opacity: 0}),
|
||||
animate('1s', style({width: 100, height: 100, opacity: .2})), group([
|
||||
animate('500ms 1s', style({width: 500})), animate('1s', style({height: 500})),
|
||||
sequence([
|
||||
animate(500, style({opacity: .5})),
|
||||
animate(500, style({opacity: .6})),
|
||||
animate(500, style({opacity: .7})),
|
||||
animate(500, style({opacity: 1})),
|
||||
])
|
||||
])
|
||||
];
|
||||
|
||||
const player = invokeAnimationSequence(steps)[0];
|
||||
expect(player.duration).toEqual(1000);
|
||||
expect(player.delay).toEqual(0);
|
||||
});
|
||||
|
||||
it('should offset group() and keyframe() timelines with a delay which is the current time of the previous player when called',
|
||||
() => {
|
||||
const steps: AnimationMetadata[] = [
|
||||
style({width: 0, height: 0}),
|
||||
animate('1500ms linear', style({width: 10, height: 10})), group([
|
||||
animate(1000, style({width: 500, height: 500})),
|
||||
animate(2000, style({width: 500, height: 500}))
|
||||
]),
|
||||
animate(1000, keyframes([
|
||||
style({width: 200}),
|
||||
style({width: 500}),
|
||||
]))
|
||||
];
|
||||
|
||||
const players = invokeAnimationSequence(steps);
|
||||
expect(players[0].delay).toEqual(0); // top-level animation
|
||||
expect(players[1].delay).toEqual(1500); // first entry in group()
|
||||
expect(players[2].delay).toEqual(1500); // second entry in group()
|
||||
expect(players[3].delay).toEqual(3500); // animate(...keyframes())
|
||||
});
|
||||
});
|
||||
|
||||
describe('state based data', () => {
|
||||
it('should create an empty animation if there are zero animation steps', () => {
|
||||
const steps: AnimationMetadata[] = [];
|
||||
|
||||
const fromStyles: ɵStyleData[] = [{background: 'blue', height: 100}];
|
||||
|
||||
const toStyles: ɵStyleData[] = [{background: 'red'}];
|
||||
|
||||
const player = invokeAnimationSequence(steps, fromStyles, toStyles)[0];
|
||||
expect(player.duration).toEqual(0);
|
||||
expect(player.keyframes).toEqual([]);
|
||||
});
|
||||
|
||||
it('should produce an animation from start to end between the to and from styles if there are animate steps in between',
|
||||
() => {
|
||||
const steps: AnimationMetadata[] = [animate(1000)];
|
||||
|
||||
const fromStyles: ɵStyleData[] = [{background: 'blue', height: 100}];
|
||||
|
||||
const toStyles: ɵStyleData[] = [{background: 'red'}];
|
||||
|
||||
const players = invokeAnimationSequence(steps, fromStyles, toStyles);
|
||||
expect(players[0].keyframes).toEqual([
|
||||
{background: 'blue', height: 100, offset: 0},
|
||||
{background: 'red', height: AUTO_STYLE, offset: 1}
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function humanizeOffsets(keyframes: ɵStyleData[], digits: number = 3): ɵStyleData[] {
|
||||
return keyframes.map(keyframe => {
|
||||
keyframe['offset'] = Number(parseFloat(<any>keyframe['offset']).toFixed(digits));
|
||||
return keyframe;
|
||||
});
|
||||
}
|
||||
|
||||
function invokeAnimationSequence(
|
||||
steps: AnimationMetadata | AnimationMetadata[], startingStyles: ɵStyleData[] = [],
|
||||
destinationStyles: ɵStyleData[] = []): AnimationTimelineInstruction[] {
|
||||
return new Animation(steps).buildTimelines(startingStyles, destinationStyles);
|
||||
}
|
||||
|
||||
function validateAndThrowAnimationSequence(steps: AnimationMetadata | AnimationMetadata[]) {
|
||||
const ast =
|
||||
Array.isArray(steps) ? sequence(<AnimationMetadata[]>steps) : <AnimationMetadata>steps;
|
||||
const errors = validateAnimationSequence(ast);
|
||||
if (errors.length) {
|
||||
throw new Error(errors.join('\n'));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||
import {buildTrigger} from '../../src/dsl/animation_trigger';
|
||||
|
||||
function makeTrigger(name: string, steps: any) {
|
||||
const triggerData = trigger(name, steps);
|
||||
const triggerInstance = buildTrigger(triggerData.name, triggerData.definitions);
|
||||
return triggerInstance;
|
||||
}
|
||||
|
||||
export function main() {
|
||||
describe('AnimationTrigger', () => {
|
||||
describe('trigger validation', () => {
|
||||
it('should group errors together for an animation trigger', () => {
|
||||
expect(() => {
|
||||
makeTrigger('myTrigger', [transition('12345', animate(3333))]);
|
||||
}).toThrowError(/Animation parsing for the myTrigger trigger have failed/);
|
||||
});
|
||||
|
||||
it('should throw an error when a transition within a trigger contains an invalid expression',
|
||||
() => {
|
||||
expect(
|
||||
() => { makeTrigger('name', [transition('somethingThatIsWrong', animate(3333))]); })
|
||||
.toThrowError(
|
||||
/- The provided transition expression "somethingThatIsWrong" is not supported/);
|
||||
});
|
||||
|
||||
it('should throw an error if an animation alias is used that is not yet supported', () => {
|
||||
expect(() => {
|
||||
makeTrigger('name', [transition(':angular', animate(3333))]);
|
||||
}).toThrowError(/- The transition alias value ":angular" is not supported/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('trigger usage', () => {
|
||||
it('should construct a trigger based on the states and transition data', () => {
|
||||
const result = makeTrigger('name', [
|
||||
state('on', style({width: 0})), state('off', style({width: 100})),
|
||||
transition('on => off', animate(1000)), transition('off => on', animate(1000))
|
||||
]);
|
||||
|
||||
expect(result.states).toEqual({'on': {width: 0}, 'off': {width: 100}});
|
||||
|
||||
expect(result.transitionFactories.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should find the first transition that matches', () => {
|
||||
const result = makeTrigger(
|
||||
'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
|
||||
|
||||
const trans = result.matchTransition('b', 'c');
|
||||
expect(trans.timelines.length).toEqual(1);
|
||||
const timeline = trans.timelines[0];
|
||||
expect(timeline.duration).toEqual(5678);
|
||||
});
|
||||
|
||||
it('should find a transition with a `*` value', () => {
|
||||
const result = makeTrigger('name', [
|
||||
transition('* => b', animate(1234)), transition('b => *', animate(5678)),
|
||||
transition('* => *', animate(9999))
|
||||
]);
|
||||
|
||||
let trans = result.matchTransition('b', 'c');
|
||||
expect(trans.timelines[0].duration).toEqual(5678);
|
||||
|
||||
trans = result.matchTransition('a', 'b');
|
||||
expect(trans.timelines[0].duration).toEqual(1234);
|
||||
|
||||
trans = result.matchTransition('c', 'c');
|
||||
expect(trans.timelines[0].duration).toEqual(9999);
|
||||
});
|
||||
|
||||
it('should null when no results are found', () => {
|
||||
const result = makeTrigger('name', [transition('a => b', animate(1111))]);
|
||||
|
||||
const trans = result.matchTransition('b', 'a');
|
||||
expect(trans).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should allow a function to be used as a predicate for the transition', () => {
|
||||
let returnValue = false;
|
||||
|
||||
const result = makeTrigger('name', [transition((from, to) => returnValue, animate(1111))]);
|
||||
|
||||
expect(result.matchTransition('a', 'b')).toBeFalsy();
|
||||
expect(result.matchTransition('1', 2)).toBeFalsy();
|
||||
expect(result.matchTransition(false, true)).toBeFalsy();
|
||||
|
||||
returnValue = true;
|
||||
|
||||
expect(result.matchTransition('a', 'b')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should call each transition predicate function until the first one that returns true',
|
||||
() => {
|
||||
let count = 0;
|
||||
|
||||
function countAndReturn(value: boolean) {
|
||||
return (fromState: any, toState: any) => {
|
||||
count++;
|
||||
return value;
|
||||
};
|
||||
}
|
||||
|
||||
const result = makeTrigger('name', [
|
||||
transition(countAndReturn(false), animate(1111)),
|
||||
transition(countAndReturn(false), animate(2222)),
|
||||
transition(countAndReturn(true), animate(3333)),
|
||||
transition(countAndReturn(true), animate(3333))
|
||||
]);
|
||||
|
||||
const trans = result.matchTransition('a', 'b');
|
||||
expect(trans.timelines[0].duration).toEqual(3333);
|
||||
|
||||
expect(count).toEqual(3);
|
||||
});
|
||||
|
||||
it('should support bi-directional transition expressions', () => {
|
||||
const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
|
||||
|
||||
const t1 = result.matchTransition('a', 'b');
|
||||
expect(t1.timelines[0].duration).toEqual(2222);
|
||||
|
||||
const t2 = result.matchTransition('b', 'a');
|
||||
expect(t2.timelines[0].duration).toEqual(2222);
|
||||
});
|
||||
|
||||
it('should support multiple transition statements in one string', () => {
|
||||
const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);
|
||||
|
||||
const t1 = result.matchTransition('a', 'b');
|
||||
expect(t1.timelines[0].duration).toEqual(1234);
|
||||
|
||||
const t2 = result.matchTransition('b', 'a');
|
||||
expect(t2.timelines[0].duration).toEqual(1234);
|
||||
|
||||
const t3 = result.matchTransition('c', 'a');
|
||||
expect(t3.timelines[0].duration).toEqual(1234);
|
||||
});
|
||||
|
||||
describe('aliases', () => {
|
||||
it('should alias the :enter transition as void => *', () => {
|
||||
const result = makeTrigger('name', [transition(':enter', animate(3333))]);
|
||||
|
||||
const trans = result.matchTransition('void', 'something');
|
||||
expect(trans.timelines[0].duration).toEqual(3333);
|
||||
});
|
||||
|
||||
it('should alias the :leave transition as * => void', () => {
|
||||
const result = makeTrigger('name', [transition(':leave', animate(3333))]);
|
||||
|
||||
const trans = result.matchTransition('something', 'void');
|
||||
expect(trans.timelines[0].duration).toEqual(3333);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {WebAnimationsStyleNormalizer} from '../../../src/dsl/style_normalization/web_animations_style_normalizer';
|
||||
|
||||
export function main() {
|
||||
describe('WebAnimationsStyleNormalizer', () => {
|
||||
const normalizer = new WebAnimationsStyleNormalizer();
|
||||
|
||||
describe('normalizePropertyName', () => {
|
||||
it('should normalize CSS property values to camel-case', () => {
|
||||
expect(normalizer.normalizePropertyName('width', [])).toEqual('width');
|
||||
expect(normalizer.normalizePropertyName('border-width', [])).toEqual('borderWidth');
|
||||
expect(normalizer.normalizePropertyName('borderHeight', [])).toEqual('borderHeight');
|
||||
expect(normalizer.normalizePropertyName('-webkit-animation', [
|
||||
])).toEqual('WebkitAnimation');
|
||||
});
|
||||
});
|
||||
|
||||
describe('normalizeStyleValue', () => {
|
||||
function normalize(prop: string, val: string | number): string {
|
||||
const errors: string[] = [];
|
||||
const result = normalizer.normalizeStyleValue(prop, prop, val, errors);
|
||||
if (errors.length) {
|
||||
throw new Error(errors.join('\n'));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
it('should normalize number-based dimensional properties to use a `px` suffix if missing',
|
||||
() => {
|
||||
expect(normalize('width', 10)).toEqual('10px');
|
||||
expect(normalize('height', 20)).toEqual('20px');
|
||||
});
|
||||
|
||||
it('should report an error when a string-based dimensional value does not contain a suffix at all',
|
||||
() => {
|
||||
expect(() => {
|
||||
normalize('width', '50');
|
||||
}).toThrowError(/Please provide a CSS unit value for width:50/);
|
||||
});
|
||||
|
||||
it('should not normalize non-dimensional properties with `px` values, but only convert them to string',
|
||||
() => {
|
||||
expect(normalize('opacity', 0)).toEqual('0');
|
||||
expect(normalize('opacity', '1')).toEqual('1');
|
||||
expect(normalize('color', 'red')).toEqual('red');
|
||||
expect(normalize('fontWeight', '100')).toEqual('100');
|
||||
});
|
||||
|
||||
it('should not normalize dimensional-based values that already contain a dimensional suffix or a non dimensional value',
|
||||
() => {
|
||||
expect(normalize('width', '50em')).toEqual('50em');
|
||||
expect(normalize('height', '500pt')).toEqual('500pt');
|
||||
expect(normalize('borderWidth', 'inherit')).toEqual('inherit');
|
||||
expect(normalize('paddingTop', 'calc(500px + 200px)')).toEqual('calc(500px + 200px)');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,663 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AnimationEvent, NoopAnimationPlayer, animate, keyframes, state, style, transition, trigger} from '@angular/animations';
|
||||
import {el} from '@angular/platform-browser/testing/browser_util';
|
||||
|
||||
import {buildAnimationKeyframes} from '../../src/dsl/animation_timeline_visitor';
|
||||
import {buildTrigger} from '../../src/dsl/animation_trigger';
|
||||
import {AnimationStyleNormalizer, NoopAnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
|
||||
import {DomAnimationEngine} from '../../src/render/dom_animation_engine';
|
||||
import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/mock_animation_driver';
|
||||
|
||||
function makeTrigger(name: string, steps: any) {
|
||||
const triggerData = trigger(name, steps);
|
||||
const triggerInstance = buildTrigger(triggerData.name, triggerData.definitions);
|
||||
return triggerInstance;
|
||||
}
|
||||
|
||||
export function main() {
|
||||
const driver = new MockAnimationDriver();
|
||||
|
||||
// these tests are only mean't to be run within the DOM
|
||||
if (typeof Element == 'undefined') return;
|
||||
|
||||
describe('DomAnimationEngine', () => {
|
||||
let element: any;
|
||||
|
||||
beforeEach(() => {
|
||||
MockAnimationDriver.log = [];
|
||||
element = el('<div></div>');
|
||||
});
|
||||
|
||||
function makeEngine(normalizer: AnimationStyleNormalizer = null) {
|
||||
return new DomAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
|
||||
}
|
||||
|
||||
describe('trigger registration', () => {
|
||||
it('should ignore and not throw an error if the same trigger is registered twice', () => {
|
||||
const engine = makeEngine();
|
||||
engine.registerTrigger(trigger('trig', []));
|
||||
expect(() => { engine.registerTrigger(trigger('trig', [])); }).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('property setting', () => {
|
||||
it('should invoke a transition based on a property change', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = trigger('myTrigger', [
|
||||
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
|
||||
]);
|
||||
|
||||
engine.registerTrigger(trig);
|
||||
|
||||
expect(engine.queuedPlayers.length).toEqual(0);
|
||||
engine.setProperty(element, 'myTrigger', 'value');
|
||||
expect(engine.queuedPlayers.length).toEqual(1);
|
||||
|
||||
const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
|
||||
expect(player.keyframes).toEqual([
|
||||
{height: '0px', offset: 0}, {height: '100px', offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should always invoke an animation even if the property change is not matched', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = trigger(
|
||||
'myTrigger',
|
||||
[transition(
|
||||
'yes => no', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
|
||||
|
||||
engine.registerTrigger(trig);
|
||||
expect(engine.queuedPlayers.length).toEqual(0);
|
||||
|
||||
engine.setProperty(element, 'myTrigger', 'no');
|
||||
expect(engine.queuedPlayers.length).toEqual(1);
|
||||
expect(engine.queuedPlayers.pop() instanceof NoopAnimationPlayer).toBe(true);
|
||||
engine.flush();
|
||||
|
||||
engine.setProperty(element, 'myTrigger', 'yes');
|
||||
expect(engine.queuedPlayers.length).toEqual(1);
|
||||
expect(engine.queuedPlayers.pop() instanceof NoopAnimationPlayer).toBe(true);
|
||||
});
|
||||
|
||||
it('should not queue an animation if the property value has not changed at all', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = trigger('myTrigger', [
|
||||
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
|
||||
]);
|
||||
|
||||
engine.registerTrigger(trig);
|
||||
expect(engine.queuedPlayers.length).toEqual(0);
|
||||
|
||||
engine.setProperty(element, 'myTrigger', 'abc');
|
||||
expect(engine.queuedPlayers.length).toEqual(1);
|
||||
|
||||
engine.setProperty(element, 'myTrigger', 'abc');
|
||||
expect(engine.queuedPlayers.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should throw an error if an animation property without a matching trigger is changed',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
expect(() => {
|
||||
engine.setProperty(element, 'myTrigger', 'no');
|
||||
}).toThrowError(/The provided animation trigger "myTrigger" has not been registered!/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('event listeners', () => {
|
||||
it('should listen to the onStart operation for the animation', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = trigger('myTrigger', [
|
||||
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
|
||||
]);
|
||||
|
||||
let count = 0;
|
||||
engine.registerTrigger(trig);
|
||||
engine.listen(element, 'myTrigger', 'start', () => count++);
|
||||
engine.setProperty(element, 'myTrigger', 'value');
|
||||
expect(count).toEqual(0);
|
||||
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
});
|
||||
|
||||
it('should listen to the onDone operation for the animation', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = trigger('myTrigger', [
|
||||
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
|
||||
]);
|
||||
|
||||
let count = 0;
|
||||
engine.registerTrigger(trig);
|
||||
engine.listen(element, 'myTrigger', 'done', () => count++);
|
||||
engine.setProperty(element, 'myTrigger', 'value');
|
||||
expect(count).toEqual(0);
|
||||
|
||||
engine.flush();
|
||||
expect(count).toEqual(0);
|
||||
|
||||
const player = engine.activePlayers.pop();
|
||||
player.finish();
|
||||
|
||||
expect(count).toEqual(1);
|
||||
});
|
||||
|
||||
it('should throw an error when an event is listened to that isn\'t supported', () => {
|
||||
const engine = makeEngine();
|
||||
const trig = trigger('myTrigger', []);
|
||||
engine.registerTrigger(trig);
|
||||
|
||||
expect(() => { engine.listen(element, 'myTrigger', 'explode', () => {}); })
|
||||
.toThrowError(
|
||||
/The provided animation trigger event "explode" for the animation trigger "myTrigger" is not supported!/);
|
||||
});
|
||||
|
||||
it('should throw an error when an event is listened for a trigger that doesn\'t exist', () => {
|
||||
const engine = makeEngine();
|
||||
expect(() => { engine.listen(element, 'myTrigger', 'explode', () => {}); })
|
||||
.toThrowError(
|
||||
/Unable to listen on the animation trigger event "explode" because the animation trigger "myTrigger" doesn\'t exist!/);
|
||||
});
|
||||
|
||||
it('should throw an error when an undefined event is listened for', () => {
|
||||
const engine = makeEngine();
|
||||
const trig = trigger('myTrigger', []);
|
||||
engine.registerTrigger(trig);
|
||||
expect(() => { engine.listen(element, 'myTrigger', '', () => {}); })
|
||||
.toThrowError(
|
||||
/Unable to listen on the animation trigger "myTrigger" because the provided event is undefined!/);
|
||||
});
|
||||
|
||||
it('should retain event listeners and call them for sucessive animation state changes',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = trigger(
|
||||
'myTrigger',
|
||||
[transition(
|
||||
'* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
|
||||
|
||||
engine.registerTrigger(trig);
|
||||
|
||||
let count = 0;
|
||||
engine.listen(element, 'myTrigger', 'start', () => count++);
|
||||
|
||||
engine.setProperty(element, 'myTrigger', '123');
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
|
||||
engine.setProperty(element, 'myTrigger', '456');
|
||||
engine.flush();
|
||||
expect(count).toEqual(2);
|
||||
});
|
||||
|
||||
it('should only fire event listener changes for when the corresponding trigger changes state',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig1 = trigger(
|
||||
'myTrigger1',
|
||||
[transition(
|
||||
'* => 123', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
|
||||
engine.registerTrigger(trig1);
|
||||
|
||||
const trig2 = trigger(
|
||||
'myTrigger2',
|
||||
[transition(
|
||||
'* => 123', [style({width: '0px'}), animate(1000, style({width: '100px'}))])]);
|
||||
engine.registerTrigger(trig2);
|
||||
|
||||
let count = 0;
|
||||
engine.listen(element, 'myTrigger1', 'start', () => count++);
|
||||
|
||||
engine.setProperty(element, 'myTrigger1', '123');
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
|
||||
engine.setProperty(element, 'myTrigger2', '123');
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
});
|
||||
|
||||
it('should allow a listener to be deregistered', () => {
|
||||
const engine = makeEngine();
|
||||
const trig = trigger(
|
||||
'myTrigger',
|
||||
[transition(
|
||||
'* => 123', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
|
||||
engine.registerTrigger(trig);
|
||||
|
||||
let count = 0;
|
||||
const deregisterFn = engine.listen(element, 'myTrigger', 'start', () => count++);
|
||||
engine.setProperty(element, 'myTrigger', '123');
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
|
||||
deregisterFn();
|
||||
engine.setProperty(element, 'myTrigger', '456');
|
||||
engine.flush();
|
||||
expect(count).toEqual(1);
|
||||
});
|
||||
|
||||
it('should trigger a listener callback with an AnimationEvent argument', () => {
|
||||
const engine = makeEngine();
|
||||
engine.registerTrigger(trigger(
|
||||
'myTrigger',
|
||||
[transition(
|
||||
'* => *', [style({height: '0px'}), animate(1234, style({height: '100px'}))])]));
|
||||
|
||||
// we do this so that the next transition has a starting value that isnt null
|
||||
engine.setProperty(element, 'myTrigger', '123');
|
||||
engine.flush();
|
||||
|
||||
let capture: AnimationEvent = null;
|
||||
engine.listen(element, 'myTrigger', 'start', (e) => capture = e);
|
||||
engine.listen(element, 'myTrigger', 'done', (e) => capture = e);
|
||||
engine.setProperty(element, 'myTrigger', '456');
|
||||
engine.flush();
|
||||
|
||||
expect(capture).toEqual({
|
||||
element,
|
||||
triggerName: 'myTrigger',
|
||||
phaseName: 'start',
|
||||
fromState: '123',
|
||||
toState: '456',
|
||||
totalTime: 1234
|
||||
});
|
||||
|
||||
capture = null;
|
||||
const player = engine.activePlayers.pop();
|
||||
player.finish();
|
||||
|
||||
expect(capture).toEqual({
|
||||
element,
|
||||
triggerName: 'myTrigger',
|
||||
phaseName: 'done',
|
||||
fromState: '123',
|
||||
toState: '456',
|
||||
totalTime: 1234
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('instructions', () => {
|
||||
it('should animate a transition instruction', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const trig = makeTrigger('something', [
|
||||
state('on', style({height: 100})), state('off', style({height: 0})),
|
||||
transition('on => off', animate(9876))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('on', 'off');
|
||||
|
||||
expect(MockAnimationDriver.log.length).toEqual(0);
|
||||
engine.animateTransition(element, instruction);
|
||||
expect(MockAnimationDriver.log.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should animate a timeline instruction', () => {
|
||||
const engine = makeEngine();
|
||||
const timelines =
|
||||
buildAnimationKeyframes([style({height: 100}), animate(1000, style({height: 0}))]);
|
||||
expect(MockAnimationDriver.log.length).toEqual(0);
|
||||
engine.animateTimeline(element, timelines);
|
||||
expect(MockAnimationDriver.log.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should animate an array of animation instructions', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const instructions = buildAnimationKeyframes([
|
||||
style({height: 100}), animate(1000, style({height: 0})),
|
||||
animate(1000, keyframes([style({width: 0}), style({width: 1000})]))
|
||||
]);
|
||||
|
||||
expect(MockAnimationDriver.log.length).toEqual(0);
|
||||
engine.animateTimeline(element, instructions);
|
||||
expect(MockAnimationDriver.log.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('transition operations', () => {
|
||||
it('should persist the styles on the element as actual styles once the animation is complete',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('on', style({height: '100px'})), state('off', style({height: '0px'})),
|
||||
transition('on => off', animate(9876))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('on', 'off');
|
||||
const player = engine.animateTransition(element, instruction);
|
||||
|
||||
expect(element.style.height).not.toEqual('0px');
|
||||
player.finish();
|
||||
expect(element.style.height).toEqual('0px');
|
||||
});
|
||||
|
||||
it('should remove all existing state styling from an element when a follow-up transition occurs on the same trigger',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('a', style({height: '100px'})), state('b', style({height: '500px'})),
|
||||
state('c', style({width: '200px'})), transition('* => *', animate(9876))
|
||||
]);
|
||||
|
||||
const instruction1 = trig.matchTransition('a', 'b');
|
||||
const player1 = engine.animateTransition(element, instruction1);
|
||||
|
||||
player1.finish();
|
||||
expect(element.style.height).toEqual('500px');
|
||||
|
||||
const instruction2 = trig.matchTransition('b', 'c');
|
||||
const player2 = engine.animateTransition(element, instruction2);
|
||||
|
||||
expect(element.style.height).not.toEqual('500px');
|
||||
player2.finish();
|
||||
expect(element.style.width).toEqual('200px');
|
||||
expect(element.style.height).not.toEqual('500px');
|
||||
});
|
||||
|
||||
it('should allow two animation transitions with different triggers to animate in parallel',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig1 = makeTrigger('something1', [
|
||||
state('a', style({width: '100px'})), state('b', style({width: '200px'})),
|
||||
transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
const trig2 = makeTrigger('something2', [
|
||||
state('x', style({height: '500px'})), state('y', style({height: '1000px'})),
|
||||
transition('* => *', animate(2000))
|
||||
]);
|
||||
|
||||
let doneCount = 0;
|
||||
function doneCallback() { doneCount++; }
|
||||
|
||||
const instruction1 = trig1.matchTransition('a', 'b');
|
||||
const instruction2 = trig2.matchTransition('x', 'y');
|
||||
const player1 = engine.animateTransition(element, instruction1);
|
||||
player1.onDone(doneCallback);
|
||||
expect(doneCount).toEqual(0);
|
||||
|
||||
const player2 = engine.animateTransition(element, instruction2);
|
||||
player2.onDone(doneCallback);
|
||||
expect(doneCount).toEqual(0);
|
||||
|
||||
player1.finish();
|
||||
expect(doneCount).toEqual(1);
|
||||
|
||||
player2.finish();
|
||||
expect(doneCount).toEqual(2);
|
||||
|
||||
expect(element.style.width).toEqual('200px');
|
||||
expect(element.style.height).toEqual('1000px');
|
||||
});
|
||||
|
||||
it('should cancel a previously running animation when a follow-up transition kicks off on the same trigger',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('x', style({opacity: 0})), state('y', style({opacity: .5})),
|
||||
state('z', style({opacity: 1})), transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
const instruction1 = trig.matchTransition('x', 'y');
|
||||
const instruction2 = trig.matchTransition('y', 'z');
|
||||
|
||||
expect(parseFloat(element.style.opacity)).not.toEqual(.5);
|
||||
|
||||
const player1 = engine.animateTransition(element, instruction1);
|
||||
const player2 = engine.animateTransition(element, instruction2);
|
||||
|
||||
expect(parseFloat(element.style.opacity)).toEqual(.5);
|
||||
|
||||
player2.finish();
|
||||
expect(parseFloat(element.style.opacity)).toEqual(1);
|
||||
|
||||
player1.finish();
|
||||
expect(parseFloat(element.style.opacity)).toEqual(1);
|
||||
});
|
||||
|
||||
it('should pass in the previously running players into the follow-up transition player when cancelled',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('x', style({opacity: 0})), state('y', style({opacity: .5})),
|
||||
state('z', style({opacity: 1})), transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
const instruction1 = trig.matchTransition('x', 'y');
|
||||
const instruction2 = trig.matchTransition('y', 'z');
|
||||
const instruction3 = trig.matchTransition('z', 'x');
|
||||
|
||||
const player1 = engine.animateTransition(element, instruction1);
|
||||
engine.flush();
|
||||
player1.setPosition(0.5);
|
||||
|
||||
const player2 = <MockAnimationPlayer>engine.animateTransition(element, instruction2);
|
||||
expect(player2.previousPlayers).toEqual([player1]);
|
||||
player2.finish();
|
||||
|
||||
const player3 = <MockAnimationPlayer>engine.animateTransition(element, instruction3);
|
||||
expect(player3.previousPlayers).toEqual([]);
|
||||
});
|
||||
|
||||
it('should cancel all existing players if a removal animation is set to occur', () => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('m', style({opacity: 0})), state('n', style({opacity: 1})),
|
||||
transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
let doneCount = 0;
|
||||
function doneCallback() { doneCount++; }
|
||||
|
||||
const instruction1 = trig.matchTransition('m', 'n');
|
||||
const instructions2 =
|
||||
buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]);
|
||||
const instruction3 = trig.matchTransition('n', 'void');
|
||||
|
||||
const player1 = engine.animateTransition(element, instruction1);
|
||||
player1.onDone(doneCallback);
|
||||
|
||||
const player2 = engine.animateTimeline(element, instructions2);
|
||||
player2.onDone(doneCallback);
|
||||
|
||||
engine.flush();
|
||||
expect(doneCount).toEqual(0);
|
||||
|
||||
const player3 = engine.animateTransition(element, instruction3);
|
||||
expect(doneCount).toEqual(2);
|
||||
});
|
||||
|
||||
it('should only persist styles that exist in the final state styles and not the last keyframe',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('0', style({width: '0px'})), state('1', style({width: '100px'})),
|
||||
transition('* => *', [animate(1000, style({height: '200px'}))])
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('0', '1');
|
||||
const player = engine.animateTransition(element, instruction);
|
||||
expect(element.style.width).not.toEqual('100px');
|
||||
|
||||
player.finish();
|
||||
expect(element.style.height).not.toEqual('200px');
|
||||
expect(element.style.width).toEqual('100px');
|
||||
});
|
||||
|
||||
it('should default to using styling from the `*` state if a matching state is not found',
|
||||
() => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('a', style({opacity: 0})), state('*', style({opacity: .5})),
|
||||
transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('a', 'z');
|
||||
engine.animateTransition(element, instruction).finish();
|
||||
|
||||
expect(parseFloat(element.style.opacity)).toEqual(.5);
|
||||
});
|
||||
|
||||
it('should treat `void` as `void`', () => {
|
||||
const engine = makeEngine();
|
||||
const trig = makeTrigger('something', [
|
||||
state('a', style({opacity: 0})), state('void', style({opacity: .8})),
|
||||
transition('* => *', animate(1000))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('a', 'void');
|
||||
engine.animateTransition(element, instruction).finish();
|
||||
|
||||
expect(parseFloat(element.style.opacity)).toEqual(.8);
|
||||
});
|
||||
});
|
||||
|
||||
describe('timeline operations', () => {
|
||||
it('should not destroy timeline-based animations after they have finished', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
const log: string[] = [];
|
||||
function capture(value: string) {
|
||||
return () => { log.push(value); };
|
||||
}
|
||||
|
||||
const instructions =
|
||||
buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 500}))]);
|
||||
|
||||
const player = engine.animateTimeline(element, instructions);
|
||||
player.onDone(capture('done'));
|
||||
player.onDestroy(capture('destroy'));
|
||||
expect(log).toEqual([]);
|
||||
|
||||
player.finish();
|
||||
expect(log).toEqual(['done']);
|
||||
|
||||
player.destroy();
|
||||
expect(log).toEqual(['done', 'destroy']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('style normalizer', () => {
|
||||
it('should normalize the style values that are animateTransitioned within an a transition animation',
|
||||
() => {
|
||||
const engine = makeEngine(new SuffixNormalizer('-normalized'));
|
||||
|
||||
const trig = makeTrigger('something', [
|
||||
state('on', style({height: 100})), state('off', style({height: 0})),
|
||||
transition('on => off', animate(9876))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('on', 'off');
|
||||
const player = <MockAnimationPlayer>engine.animateTransition(element, instruction);
|
||||
|
||||
expect(player.keyframes).toEqual([
|
||||
{'height-normalized': '100-normalized', offset: 0},
|
||||
{'height-normalized': '0-normalized', offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should normalize the style values that are animateTransitioned within an a timeline animation',
|
||||
() => {
|
||||
const engine = makeEngine(new SuffixNormalizer('-normalized'));
|
||||
|
||||
const instructions = buildAnimationKeyframes([
|
||||
style({width: '333px'}),
|
||||
animate(1000, style({width: '999px'})),
|
||||
]);
|
||||
|
||||
const player = <MockAnimationPlayer>engine.animateTimeline(element, instructions);
|
||||
expect(player.keyframes).toEqual([
|
||||
{'width-normalized': '333px-normalized', offset: 0},
|
||||
{'width-normalized': '999px-normalized', offset: 1}
|
||||
]);
|
||||
});
|
||||
|
||||
it('should throw an error when normalization fails within a transition animation', () => {
|
||||
const engine = makeEngine(new ExactCssValueNormalizer({left: '100px'}));
|
||||
|
||||
const trig = makeTrigger('something', [
|
||||
state('a', style({left: '0px', width: '200px'})),
|
||||
state('b', style({left: '100px', width: '100px'})), transition('a => b', animate(9876))
|
||||
]);
|
||||
|
||||
const instruction = trig.matchTransition('a', 'b');
|
||||
|
||||
let errorMessage = '';
|
||||
try {
|
||||
engine.animateTransition(element, instruction);
|
||||
} catch (e) {
|
||||
errorMessage = e.toString();
|
||||
}
|
||||
|
||||
expect(errorMessage).toMatch(/Unable to animate due to the following errors:/);
|
||||
expect(errorMessage).toMatch(/- The CSS property `left` is not allowed to be `0px`/);
|
||||
expect(errorMessage).toMatch(/- The CSS property `width` is not allowed/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('view operations', () => {
|
||||
it('should perform insert operations immediately ', () => {
|
||||
const engine = makeEngine();
|
||||
|
||||
let container = <any>el('<div></div>');
|
||||
let child1 = <any>el('<div></div>');
|
||||
let child2 = <any>el('<div></div>');
|
||||
|
||||
engine.onInsert(container, () => container.appendChild(child1));
|
||||
engine.onInsert(container, () => container.appendChild(child2));
|
||||
|
||||
expect(container.contains(child1)).toBe(true);
|
||||
expect(container.contains(child2)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
class SuffixNormalizer extends AnimationStyleNormalizer {
|
||||
constructor(private _suffix: string) { super(); }
|
||||
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string {
|
||||
return propertyName + this._suffix;
|
||||
}
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
return value + this._suffix;
|
||||
}
|
||||
}
|
||||
|
||||
class ExactCssValueNormalizer extends AnimationStyleNormalizer {
|
||||
constructor(private _allowedValues: {[propName: string]: any}) { super(); }
|
||||
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string {
|
||||
if (!this._allowedValues[propertyName]) {
|
||||
errors.push(`The CSS property \`${propertyName}\` is not allowed`);
|
||||
}
|
||||
return propertyName;
|
||||
}
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
const expectedValue = this._allowedValues[userProvidedProperty];
|
||||
if (expectedValue != value) {
|
||||
errors.push(`The CSS property \`${userProvidedProperty}\` is not allowed to be \`${value}\``);
|
||||
}
|
||||
return expectedValue;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,229 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {state, style, trigger} from '@angular/animations';
|
||||
import {el} from '@angular/platform-browser/testing/browser_util';
|
||||
|
||||
import {NoopAnimationEngine} from '../src/render/noop_animation_engine';
|
||||
|
||||
export function main() {
|
||||
describe('NoopAnimationEngine', () => {
|
||||
let captures: string[] = [];
|
||||
function capture(value: string = null) { return (v: any = null) => captures.push(value || v); }
|
||||
|
||||
beforeEach(() => { captures = []; });
|
||||
|
||||
it('should immediately issue DOM removals during remove animations and then fire the animation callbacks after flush',
|
||||
() => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
|
||||
const elm1 = {};
|
||||
const elm2 = {};
|
||||
engine.onRemove(elm1, capture('1'));
|
||||
engine.onRemove(elm2, capture('2'));
|
||||
|
||||
engine.listen(elm1, 'trig', 'start', capture('1-start'));
|
||||
engine.listen(elm2, 'trig', 'start', capture('2-start'));
|
||||
engine.listen(elm1, 'trig', 'done', capture('1-done'));
|
||||
engine.listen(elm2, 'trig', 'done', capture('2-done'));
|
||||
|
||||
expect(captures).toEqual(['1', '2']);
|
||||
engine.flush();
|
||||
|
||||
expect(captures).toEqual(['1', '2', '1-start', '2-start', '1-done', '2-done']);
|
||||
});
|
||||
|
||||
it('should only fire the `start` listener for a trigger that has had a property change', () => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
|
||||
const elm1 = {};
|
||||
const elm2 = {};
|
||||
const elm3 = {};
|
||||
|
||||
engine.listen(elm1, 'trig1', 'start', capture());
|
||||
engine.setProperty(elm1, 'trig1', 'cool');
|
||||
engine.setProperty(elm2, 'trig2', 'sweet');
|
||||
engine.listen(elm2, 'trig2', 'start', capture());
|
||||
engine.listen(elm3, 'trig3', 'start', capture());
|
||||
|
||||
expect(captures).toEqual([]);
|
||||
engine.flush();
|
||||
|
||||
expect(captures.length).toEqual(2);
|
||||
const trig1Data = captures.shift();
|
||||
const trig2Data = captures.shift();
|
||||
expect(trig1Data).toEqual({
|
||||
element: elm1,
|
||||
triggerName: 'trig1',
|
||||
fromState: 'void',
|
||||
toState: 'cool',
|
||||
phaseName: 'start',
|
||||
totalTime: 0
|
||||
});
|
||||
|
||||
expect(trig2Data).toEqual({
|
||||
element: elm2,
|
||||
triggerName: 'trig2',
|
||||
fromState: 'void',
|
||||
toState: 'sweet',
|
||||
phaseName: 'start',
|
||||
totalTime: 0
|
||||
});
|
||||
|
||||
captures = [];
|
||||
engine.flush();
|
||||
expect(captures).toEqual([]);
|
||||
});
|
||||
|
||||
it('should only fire the `done` listener for a trigger that has had a property change', () => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
|
||||
const elm1 = {};
|
||||
const elm2 = {};
|
||||
const elm3 = {};
|
||||
|
||||
engine.listen(elm1, 'trig1', 'done', capture());
|
||||
engine.setProperty(elm1, 'trig1', 'awesome');
|
||||
engine.setProperty(elm2, 'trig2', 'amazing');
|
||||
engine.listen(elm2, 'trig2', 'done', capture());
|
||||
engine.listen(elm3, 'trig3', 'done', capture());
|
||||
|
||||
expect(captures).toEqual([]);
|
||||
engine.flush();
|
||||
|
||||
expect(captures.length).toEqual(2);
|
||||
const trig1Data = captures.shift();
|
||||
const trig2Data = captures.shift();
|
||||
expect(trig1Data).toEqual({
|
||||
element: elm1,
|
||||
triggerName: 'trig1',
|
||||
fromState: 'void',
|
||||
toState: 'awesome',
|
||||
phaseName: 'done',
|
||||
totalTime: 0
|
||||
});
|
||||
|
||||
expect(trig2Data).toEqual({
|
||||
element: elm2,
|
||||
triggerName: 'trig2',
|
||||
fromState: 'void',
|
||||
toState: 'amazing',
|
||||
phaseName: 'done',
|
||||
totalTime: 0
|
||||
});
|
||||
|
||||
captures = [];
|
||||
engine.flush();
|
||||
expect(captures).toEqual([]);
|
||||
});
|
||||
|
||||
it('should deregister a listener when the return function is called, but only after flush',
|
||||
() => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
const elm = {};
|
||||
|
||||
const fn1 = engine.listen(elm, 'trig1', 'start', capture('trig1-start'));
|
||||
const fn2 = engine.listen(elm, 'trig2', 'done', capture('trig2-done'));
|
||||
|
||||
engine.setProperty(elm, 'trig1', 'value1');
|
||||
engine.setProperty(elm, 'trig2', 'value2');
|
||||
engine.flush();
|
||||
expect(captures).toEqual(['trig1-start', 'trig2-done']);
|
||||
|
||||
captures = [];
|
||||
engine.setProperty(elm, 'trig1', 'value3');
|
||||
engine.setProperty(elm, 'trig2', 'value4');
|
||||
|
||||
fn1();
|
||||
engine.flush();
|
||||
expect(captures).toEqual(['trig1-start', 'trig2-done']);
|
||||
|
||||
captures = [];
|
||||
engine.setProperty(elm, 'trig1', 'value5');
|
||||
engine.setProperty(elm, 'trig2', 'value6');
|
||||
|
||||
fn2();
|
||||
engine.flush();
|
||||
expect(captures).toEqual(['trig2-done']);
|
||||
|
||||
captures = [];
|
||||
engine.setProperty(elm, 'trig1', 'value7');
|
||||
engine.setProperty(elm, 'trig2', 'value8');
|
||||
engine.flush();
|
||||
expect(captures).toEqual([]);
|
||||
});
|
||||
|
||||
it('should fire a removal listener even if the listener is deregistered prior to flush', () => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
const elm = {};
|
||||
|
||||
const fn = engine.listen(elm, 'trig', 'start', capture('removal listener'));
|
||||
fn();
|
||||
|
||||
engine.onRemove(elm, capture('dom removal'));
|
||||
engine.flush();
|
||||
|
||||
expect(captures).toEqual(['dom removal', 'removal listener']);
|
||||
});
|
||||
|
||||
describe('styling', () => {
|
||||
// these tests are only mean't to be run within the DOM
|
||||
if (typeof Element == 'undefined') return;
|
||||
|
||||
it('should persist the styles on the element when the animation is complete', () => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
engine.registerTrigger(trigger('matias', [
|
||||
state('a', style({width: '100px'})),
|
||||
]));
|
||||
|
||||
const element = el('<div></div>');
|
||||
expect(element.style.width).not.toEqual('100px');
|
||||
|
||||
engine.setProperty(element, 'matias', 'a');
|
||||
expect(element.style.width).not.toEqual('100px');
|
||||
|
||||
engine.flush();
|
||||
expect(element.style.width).toEqual('100px');
|
||||
});
|
||||
|
||||
it('should remove previously persist styles off of the element when a follow-up animation starts',
|
||||
() => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
engine.registerTrigger(trigger('matias', [
|
||||
state('a', style({width: '100px'})),
|
||||
state('b', style({height: '100px'})),
|
||||
]));
|
||||
|
||||
const element = el('<div></div>');
|
||||
|
||||
engine.setProperty(element, 'matias', 'a');
|
||||
engine.flush();
|
||||
expect(element.style.width).toEqual('100px');
|
||||
|
||||
engine.setProperty(element, 'matias', 'b');
|
||||
expect(element.style.width).not.toEqual('100px');
|
||||
expect(element.style.height).not.toEqual('100px');
|
||||
|
||||
engine.flush();
|
||||
expect(element.style.height).toEqual('100px');
|
||||
});
|
||||
|
||||
it('should fall back to `*` styles incase the target state styles are not found', () => {
|
||||
const engine = new NoopAnimationEngine();
|
||||
engine.registerTrigger(trigger('matias', [
|
||||
state('*', style({opacity: '0.5'})),
|
||||
]));
|
||||
|
||||
const element = el('<div></div>');
|
||||
|
||||
engine.setProperty(element, 'matias', 'xyz');
|
||||
engine.flush();
|
||||
expect(element.style.opacity).toEqual('0.5');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||
import {Component} from '@angular/core';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {ɵAnimationEngine} from '@angular/platform-browser/animations';
|
||||
import {NoopAnimationsModule} from '../src/module';
|
||||
import {NoopAnimationEngine} from '../src/render/noop_animation_engine';
|
||||
|
||||
export function main() {
|
||||
describe('NoopAnimationsModule', () => {
|
||||
beforeEach(() => { TestBed.configureTestingModule({imports: [NoopAnimationsModule]}); });
|
||||
|
||||
it('the engine should be a Noop engine', () => {
|
||||
const engine = TestBed.get(ɵAnimationEngine);
|
||||
expect(engine instanceof NoopAnimationEngine).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should flush and fire callbacks when the zone becomes stable', (async) => {
|
||||
@Component({
|
||||
selector: 'my-cmp',
|
||||
template:
|
||||
'<div [@myAnimation]="exp" (@myAnimation.start)="onStart($event)" (@myAnimation.done)="onDone($event)"></div>',
|
||||
animations: [trigger(
|
||||
'myAnimation',
|
||||
[transition(
|
||||
'* => state', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
|
||||
})
|
||||
class Cmp {
|
||||
exp: any;
|
||||
startEvent: any;
|
||||
doneEvent: any;
|
||||
onStart(event: any) { this.startEvent = event; }
|
||||
onDone(event: any) { this.doneEvent = event; }
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Cmp]});
|
||||
|
||||
const fixture = TestBed.createComponent(Cmp);
|
||||
const cmp = fixture.componentInstance;
|
||||
cmp.exp = 'state';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(cmp.startEvent.triggerName).toEqual('myAnimation');
|
||||
expect(cmp.startEvent.phaseName).toEqual('start');
|
||||
expect(cmp.doneEvent.triggerName).toEqual('myAnimation');
|
||||
expect(cmp.doneEvent.phaseName).toEqual('done');
|
||||
async();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle leave animation callbacks even if the element is destroyed in the process',
|
||||
(async) => {
|
||||
@Component({
|
||||
selector: 'my-cmp',
|
||||
template:
|
||||
'<div *ngIf="exp" @myAnimation (@myAnimation.start)="onStart($event)" (@myAnimation.done)="onDone($event)"></div>',
|
||||
animations: [trigger(
|
||||
'myAnimation',
|
||||
[transition(
|
||||
':leave', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
|
||||
})
|
||||
class Cmp {
|
||||
exp: any;
|
||||
startEvent: any;
|
||||
doneEvent: any;
|
||||
onStart(event: any) { this.startEvent = event; }
|
||||
onDone(event: any) { this.doneEvent = event; }
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Cmp]});
|
||||
const engine = TestBed.get(ɵAnimationEngine);
|
||||
const fixture = TestBed.createComponent(Cmp);
|
||||
const cmp = fixture.componentInstance;
|
||||
|
||||
cmp.exp = true;
|
||||
fixture.detectChanges();
|
||||
cmp.startEvent = null;
|
||||
cmp.doneEvent = null;
|
||||
|
||||
cmp.exp = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
expect(cmp.startEvent.triggerName).toEqual('myAnimation');
|
||||
expect(cmp.startEvent.phaseName).toEqual('start');
|
||||
expect(cmp.startEvent.toState).toEqual('void');
|
||||
expect(cmp.doneEvent.triggerName).toEqual('myAnimation');
|
||||
expect(cmp.doneEvent.phaseName).toEqual('done');
|
||||
expect(cmp.doneEvent.toState).toEqual('void');
|
||||
async();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
export {MockAnimationDriver, MockAnimationPlayer} from './mock_animation_driver';
|
||||
@ -0,0 +1,80 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {AUTO_STYLE, AnimationPlayer, NoopAnimationPlayer, ɵStyleData} from '@angular/animations';
|
||||
|
||||
import {AnimationDriver} from '../src/render/animation_driver';
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class MockAnimationDriver implements AnimationDriver {
|
||||
static log: AnimationPlayer[] = [];
|
||||
|
||||
animate(
|
||||
element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
|
||||
easing: string, previousPlayers: any[] = []): MockAnimationPlayer {
|
||||
const player =
|
||||
new MockAnimationPlayer(element, keyframes, duration, delay, easing, previousPlayers);
|
||||
MockAnimationDriver.log.push(<AnimationPlayer>player);
|
||||
return player;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class MockAnimationPlayer extends NoopAnimationPlayer {
|
||||
private __finished = false;
|
||||
public previousStyles: {[key: string]: string | number} = {};
|
||||
|
||||
constructor(
|
||||
public element: any, public keyframes: {[key: string]: string | number}[],
|
||||
public duration: number, public delay: number, public easing: string,
|
||||
public previousPlayers: any[]) {
|
||||
super();
|
||||
previousPlayers.forEach(player => {
|
||||
if (player instanceof MockAnimationPlayer) {
|
||||
const styles = player._captureStyles();
|
||||
Object.keys(styles).forEach(prop => { this.previousStyles[prop] = styles[prop]; });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
finish(): void {
|
||||
super.finish();
|
||||
this.__finished = true;
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
super.destroy();
|
||||
this.__finished = true;
|
||||
}
|
||||
|
||||
private _captureStyles(): {[styleName: string]: string | number} {
|
||||
const captures: ɵStyleData = {};
|
||||
|
||||
Object.keys(this.previousStyles).forEach(prop => {
|
||||
captures[prop] = this.previousStyles[prop];
|
||||
});
|
||||
|
||||
if (this.hasStarted()) {
|
||||
// when assembling the captured styles, it's important that
|
||||
// we build the keyframe styles in the following order:
|
||||
// {other styles within keyframes, ... previousStyles }
|
||||
this.keyframes.forEach(kf => {
|
||||
Object.keys(kf).forEach(prop => {
|
||||
if (prop != 'offset') {
|
||||
captures[prop] = this.__finished ? kf[prop] : AUTO_STYLE;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return captures;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
{
|
||||
"extends": "./tsconfig-build",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/packages-dist/platform-browser",
|
||||
"paths": {
|
||||
"@angular/core": ["../../../dist/packages-dist/core"],
|
||||
"@angular/core/testing": ["../../../dist/packages-dist/core/testing"],
|
||||
"@angular/animations": ["../../../dist/packages-dist/animations"],
|
||||
"@angular/platform-browser": ["../../../dist/packages-dist/platform-browser"],
|
||||
"@angular/platform-browser/animations": ["../../../dist/packages-dist/platform-browser/animations"],
|
||||
"@angular/common": ["../../../dist/packages-dist/common"],
|
||||
"@angular/common/testing": ["../../../dist/packages-dist/common/testing"]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"animations/testing/index.ts",
|
||||
"../../../node_modules/@types/hammerjs/index.d.ts",
|
||||
"../../../node_modules/@types/jasmine/index.d.ts",
|
||||
"../../../node_modules/zone.js/dist/zone.js.d.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"strictMetadataEmit": true
|
||||
}
|
||||
}
|
||||
25
packages/platform-browser/animations/tsconfig-build.json
Normal file
25
packages/platform-browser/animations/tsconfig-build.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"extends": "./tsconfig-build",
|
||||
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/packages-dist/platform-browser",
|
||||
"paths": {
|
||||
"rxjs/*": ["../../../node_modules/rxjs/*"],
|
||||
"@angular/core": ["../../../dist/packages-dist/core"],
|
||||
"@angular/core/testing": ["../../../dist/packages-dist/core/testing"],
|
||||
"@angular/animations": ["../../../dist/packages-dist/animations"],
|
||||
"@angular/platform-browser": ["../../../dist/packages-dist/platform-browser"]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"animations/public_api.ts",
|
||||
"../../../node_modules/zone.js/dist/zone.js.d.ts",
|
||||
"../../system.d.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"annotateForClosureCompiler": true,
|
||||
"strictMetadataEmit": true,
|
||||
"flatModuleOutFile": "index.js",
|
||||
"flatModuleId": "@angular/platform-browser/animations"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user