function
Declares an animation transition as a sequence of animation steps to run when a given condition is satisfied. The condition is a Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. When the state criteria of a defined transition are met, the associated animation is triggered.
transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean), steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions = null): AnimationTransitionMetadata
stateChangeExpr | string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean) | A Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. Note that "true" and "false" match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the animation trigger element. The animation steps run when the expression evaluates to true.
|
steps | AnimationMetadata | AnimationMetadata[] | One or more animation objects, as returned by the |
options | AnimationOptions | An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation. Optional. Default is |
AnimationTransitionMetadata
: An object that encapsulates the transition data.
The template associated with a component binds an animation trigger to an element.
<!-- somewhere inside of my-component-tpl.html --> <div [@myAnimationTrigger]="myStatusExp">...</div>
All transitions are defined within an animation trigger, along with named states that the transitions change to and from.
trigger("myAnimationTrigger", [ // define states state("on", style({ background: "green" })), state("off", style({ background: "grey" })), ...]
Note that when you call the sequence()
function within a group()
or a transition()
call, execution does not continue to the next instruction until each of the inner animation steps have completed.
The following examples define transitions between the two defined states (and default states), using various options:
// Transition occurs when the state value // bound to "myAnimationTrigger" changes from "on" to "off" transition("on => off", animate(500)) // Run the same animation for both directions transition("on <=> off", animate(500)) // Define multiple state-change pairs separated by commas transition("on => off, off => void", animate(500))
transition("void => *", [ style({ opacity: 0 }), animate(500) ])
Capture a state change between any states:
transition("* => *", animate("1s 0s"))
Entry and exit transitions:
transition(":enter", [ style({ opacity: 0 }), animate(500, style({ opacity: 1 })) ]), transition(":leave", [ animate(500, style({ opacity: 0 })) ])
:increment
and :decrement
to initiate transitions:transition(":increment", group([ query(':enter', [ style({ left: '100%' }), animate('0.5s ease-out', style('*')) ]), query(':leave', [ animate('0.5s ease-out', style({ left: '-100%' })) ]) ])) transition(":decrement", group([ query(':enter', [ style({ left: '100%' }), animate('0.5s ease-out', style('*')) ]), query(':leave', [ animate('0.5s ease-out', style({ left: '-100%' })) ]) ]))
Here is an example of a fromState
specified as a state-change function that invokes an animation when true:
transition((fromState, toState) => { return fromState == "off" && toState == "on"; }, animate("1s 0s"))
If the final step in a transition is a call to animate()
that uses a timing value with no style data, that step is automatically considered the final animation arc, for the element to reach the final state. Angular automatically adds or removes CSS styles to ensure that the element is in the correct final state.
The following example defines a transition that starts by hiding the element, then makes sure that it animates properly to whatever state is currently active for trigger:
transition("void => *", [ style({ opacity: 0 }), animate(500) ])
If a trigger binding value is a Boolean, it can be matched using a transition expression that compares true and false or 1 and 0. For example:
// in the template <div [@openClose]="open ? true : false">...</div> // in the component metadata trigger('openClose', [ state('true', style({ height: '*' })), state('false', style({ height: '0px' })), transition('false <=> true', animate(500)) ])
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/animations/transition