cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(animations): support function types in transitions

Browse Source 
Closes #13538
Closes #13537
This commit is contained in:
Matias Niemelä
2016-12-16 17:52:17 -08:00
parent 3f67ab074a
commit 9211a22039
8 changed files with 144 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
modules/@angular/core/src/animation/metadata.ts
View File

@ -48,7 +48,11 @@ export class AnimationStateDeclarationMetadata extends AnimationStateMetadata {
* @experimental Animation support is experimental.
*/
export class AnimationStateTransitionMetadata extends AnimationStateMetadata {
constructor(public stateChangeExpr: string, public steps: AnimationMetadata) { super(); }
constructor(
public stateChangeExpr: string|((fromState: string, toState: string) => boolean),
public steps: AnimationMetadata) {
super();
}
}
/**
@ -471,6 +475,10 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
* which consists
* of two known states (use an asterix (`*`) to refer to a dynamic starting and/or ending state).
*
* A function can also be provided as the `stateChangeExpr` argument for a transition and this
* function will be executed each time a state change occurs. If the value returned within the
* function is true then the associated animation will be run.
*
* Animation transitions are placed within an {@link trigger animation trigger}. For an transition
* to animate to
* a state value and persist its styles then one or more {@link state animation states} is expected
@ -511,6 +519,12 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
*
* // this will capture a state change between any states
* transition("* => *", animate("1s 0s")),
*
* // you can also go full out and include a function
* transition((fromState, toState) => {
* // when `true` then it will allow the animation below to be invoked
* return fromState == "off" && toState == "on";
* }, animate("1s 0s"))
* ])
* ```
*
@ -562,8 +576,9 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
*
* @experimental Animation support is experimental.
*/
export function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[]):
AnimationStateTransitionMetadata {
export function transition(
stateChangeExpr: string | ((fromState: string, toState: string) => boolean),
steps: AnimationMetadata | AnimationMetadata[]): AnimationStateTransitionMetadata {
const animationData = Array.isArray(steps) ? new AnimationSequenceMetadata(steps) : steps;
return new AnimationStateTransitionMetadata(stateChangeExpr, animationData);
}