@angular/animations 13.1.0-next.2 → 13.1.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animations.d.ts +2 -6
- package/browser/browser.d.ts +1 -1
- package/browser/testing/testing.d.ts +1 -1
- package/esm2020/browser/src/dsl/animation_ast_builder.mjs +3 -2
- package/esm2020/browser/src/dsl/animation_timeline_builder.mjs +7 -7
- package/esm2020/browser/src/render/animation_driver.mjs +3 -3
- package/esm2020/browser/src/render/transition_animation_engine.mjs +25 -24
- package/esm2020/src/animation_metadata.mjs +2 -6
- package/esm2020/src/version.mjs +1 -1
- package/fesm2015/animations.mjs +2 -6
- package/fesm2015/animations.mjs.map +1 -1
- package/fesm2015/browser/testing.mjs +1 -1
- package/fesm2015/browser.mjs +36 -34
- package/fesm2015/browser.mjs.map +1 -1
- package/fesm2020/animations.mjs +2 -6
- package/fesm2020/animations.mjs.map +1 -1
- package/fesm2020/browser/testing.mjs +1 -1
- package/fesm2020/browser.mjs +36 -34
- package/fesm2020/browser.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animations.mjs","sources":["../../../../../../packages/animations/src/animation_builder.ts","../../../../../../packages/animations/src/animation_metadata.ts","../../../../../../packages/animations/src/util.ts","../../../../../../packages/animations/src/players/animation_player.ts","../../../../../../packages/animations/src/players/animation_group_player.ts","../../../../../../packages/animations/src/private_export.ts","../../../../../../packages/animations/src/animations.ts","../../../../../../packages/animations/public_api.ts","../../../../../../packages/animations/index.ts","../../../../../../packages/animations/animations.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {AnimationMetadata, AnimationOptions} from './animation_metadata';\nimport {AnimationPlayer} from './players/animation_player';\n\n/**\n * An injectable service that produces an animation sequence programmatically within an\n * Angular component or directive.\n * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.\n *\n * @usageNotes\n *\n * To use this service, add it to your component or directive as a dependency.\n * The service is instantiated along with your component.\n *\n * Apps do not typically need to create their own animation players, but if you\n * do need to, follow these steps:\n *\n * 1. Use the `build()` method to create a programmatic animation using the\n * `animate()` function. The method returns an `AnimationFactory` instance.\n *\n * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.\n *\n * 3. Use the player object to control the animation programmatically.\n *\n * For example:\n *\n * ```ts\n * // import the service from BrowserAnimationsModule\n * import {AnimationBuilder} from '@angular/animations';\n * // require the service as a dependency\n * class MyCmp {\n * constructor(private _builder: AnimationBuilder) {}\n *\n * makeAnimation(element: any) {\n * // first define a reusable animation\n * const myAnimation = this._builder.build([\n * style({ width: 0 }),\n * animate(1000, style({ width: '100px' }))\n * ]);\n *\n * // use the returned factory object to create a player\n * const player = myAnimation.create(element);\n *\n * player.play();\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport abstract class AnimationBuilder {\n /**\n * Builds a factory for producing a defined animation.\n * @param animation A reusable animation definition.\n * @returns A factory object that can create a player for the defined animation.\n * @see `animate()`\n */\n abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;\n}\n\n/**\n * A factory object returned from the `AnimationBuilder`.`build()` method.\n *\n * @publicApi\n */\nexport abstract class AnimationFactory {\n /**\n * Creates an `AnimationPlayer` instance for the reusable animation defined by\n * the `AnimationBuilder`.`build()` method that created this factory.\n * Attaches the new player a DOM element.\n * @param element The DOM element to which to attach the animation.\n * @param options A set of options that can include a time delay and\n * additional developer-defined parameters.\n */\n abstract create(element: any, options?: AnimationOptions): AnimationPlayer;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Represents a set of CSS styles for use in an animation style.\n */\nexport interface ɵStyleData {\n [key: string]: string|number;\n}\n\n/**\n * Represents animation-step timing parameters for an animation step.\n * @see `animate()`\n *\n * @publicApi\n */\nexport declare type AnimateTimings = {\n /**\n * The full duration of an animation step. A number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n */\n duration: number,\n /**\n * The delay in applying an animation step. A number and optional time unit.\n * The default unit is milliseconds.\n */\n delay: number,\n /**\n * An easing style that controls how an animations step accelerates\n * and decelerates during its run time. An easing function such as `cubic-bezier()`,\n * or one of the following constants:\n * - `ease-in`\n * - `ease-out`\n * - `ease-in-and-out`\n */\n easing: string | null\n};\n\n/**\n * @description Options that control animation styling and timing.\n *\n * The following animation functions accept `AnimationOptions` data:\n *\n * - `transition()`\n * - `sequence()`\n * - `{@link animations/group group()}`\n * - `query()`\n * - `animation()`\n * - `useAnimation()`\n * - `animateChild()`\n *\n * Programmatic animations built using the `AnimationBuilder` service also\n * make use of `AnimationOptions`.\n *\n * @publicApi\n */\nexport declare interface AnimationOptions {\n /**\n * Sets a time-delay for initiating an animation action.\n * A number and optional time unit, such as \"1s\" or \"10ms\" for one second\n * and 10 milliseconds, respectively.The default unit is milliseconds.\n * Default value is 0, meaning no delay.\n */\n delay?: number|string;\n /**\n * A set of developer-defined parameters that modify styling and timing\n * when an animation action starts. An array of key-value pairs, where the provided value\n * is used as a default.\n */\n params?: {[name: string]: any};\n}\n\n/**\n * Adds duration options to control animation styling and timing for a child animation.\n *\n * @see `animateChild()`\n *\n * @publicApi\n */\nexport declare interface AnimateChildOptions extends AnimationOptions {\n duration?: number|string;\n}\n\n/**\n * @description Constants for the categories of parameters that can be defined for animations.\n *\n * A corresponding function defines a set of parameters for each category, and\n * collects them into a corresponding `AnimationMetadata` object.\n *\n * @publicApi\n */\nexport const enum AnimationMetadataType {\n /**\n * Associates a named animation state with a set of CSS styles.\n * See `state()`\n */\n State = 0,\n /**\n * Data for a transition from one animation state to another.\n * See `transition()`\n */\n Transition = 1,\n /**\n * Contains a set of animation steps.\n * See `sequence()`\n */\n Sequence = 2,\n /**\n * Contains a set of animation steps.\n * See `{@link animations/group group()}`\n */\n Group = 3,\n /**\n * Contains an animation step.\n * See `animate()`\n */\n Animate = 4,\n /**\n * Contains a set of animation steps.\n * See `keyframes()`\n */\n Keyframes = 5,\n /**\n * Contains a set of CSS property-value pairs into a named style.\n * See `style()`\n */\n Style = 6,\n /**\n * Associates an animation with an entry trigger that can be attached to an element.\n * See `trigger()`\n */\n Trigger = 7,\n /**\n * Contains a re-usable animation.\n * See `animation()`\n */\n Reference = 8,\n /**\n * Contains data to use in executing child animations returned by a query.\n * See `animateChild()`\n */\n AnimateChild = 9,\n /**\n * Contains animation parameters for a re-usable animation.\n * See `useAnimation()`\n */\n AnimateRef = 10,\n /**\n * Contains child-animation query data.\n * See `query()`\n */\n Query = 11,\n /**\n * Contains data for staggering an animation sequence.\n * See `stagger()`\n */\n Stagger = 12\n}\n\n/**\n * Specifies automatic styling.\n *\n * @publicApi\n */\nexport const AUTO_STYLE = '*';\n\n/**\n * Base for animation data structures.\n *\n * @publicApi\n */\nexport interface AnimationMetadata {\n type: AnimationMetadataType;\n}\n\n/**\n * Contains an animation trigger. Instantiated and returned by the\n * `trigger()` function.\n *\n * @publicApi\n */\nexport interface AnimationTriggerMetadata extends AnimationMetadata {\n /**\n * The trigger name, used to associate it with an element. Unique within the component.\n */\n name: string;\n /**\n * An animation definition object, containing an array of state and transition declarations.\n */\n definitions: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: {params?: {[name: string]: any}}|null;\n}\n\n/**\n * Encapsulates an animation state by associating a state name with a set of CSS styles.\n * Instantiated and returned by the `state()` function.\n *\n * @publicApi\n */\nexport interface AnimationStateMetadata extends AnimationMetadata {\n /**\n * The state name, unique within the component.\n */\n name: string;\n /**\n * The CSS styles associated with this state.\n */\n styles: AnimationStyleMetadata;\n /**\n * An options object containing\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n */\n options?: {params: {[name: string]: any}};\n}\n\n/**\n * Encapsulates an animation transition. Instantiated and returned by the\n * `transition()` function.\n *\n * @publicApi\n */\nexport interface AnimationTransitionMetadata extends AnimationMetadata {\n /**\n * An expression that describes a state change.\n */\n expr: string|\n ((fromState: string, toState: string, element?: any,\n params?: {[key: string]: any}) => boolean);\n /**\n * One or more animation objects to which this transition applies.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation, which is a collection of individual animation steps.\n * Instantiated and returned by the `animation()` function, and\n * passed to the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationReferenceMetadata extends AnimationMetadata {\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation query. Instantiated and returned by\n * the `query()` function.\n *\n * @publicApi\n */\nexport interface AnimationQueryMetadata extends AnimationMetadata {\n /**\n * The CSS selector for this query.\n */\n selector: string;\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * A query options object.\n */\n options: AnimationQueryOptions|null;\n}\n\n/**\n * Encapsulates a keyframes sequence. Instantiated and returned by\n * the `keyframes()` function.\n *\n * @publicApi\n */\nexport interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation styles.\n */\n steps: AnimationStyleMetadata[];\n}\n\n/**\n * Encapsulates an animation style. Instantiated and returned by\n * the `style()` function.\n *\n * @publicApi\n */\nexport interface AnimationStyleMetadata extends AnimationMetadata {\n /**\n * A set of CSS style properties.\n */\n styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;\n /**\n * A percentage of the total animate time at which the style is to be applied.\n */\n offset: number|null;\n}\n\n/**\n * Encapsulates an animation step. Instantiated and returned by\n * the `animate()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateMetadata extends AnimationMetadata {\n /**\n * The timing data for the step.\n */\n timings: string|number|AnimateTimings;\n /**\n * A set of styles used in the step.\n */\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null;\n}\n\n/**\n * Encapsulates a child animation, that can be run explicitly when the parent is run.\n * Instantiated and returned by the `animateChild` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateChildMetadata extends AnimationMetadata {\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation.\n * Instantiated and returned by the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateRefMetadata extends AnimationMetadata {\n /**\n * An animation reference object.\n */\n animation: AnimationReferenceMetadata;\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation sequence.\n * Instantiated and returned by the `sequence()` function.\n *\n * @publicApi\n */\nexport interface AnimationSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation step objects.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation group.\n * Instantiated and returned by the `{@link animations/group group()}` function.\n *\n * @publicApi\n */\nexport interface AnimationGroupMetadata extends AnimationMetadata {\n /**\n * One or more animation or style steps that form this group.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates animation query options.\n * Passed to the `query()` function.\n *\n * @publicApi\n */\nexport declare interface AnimationQueryOptions extends AnimationOptions {\n /**\n * True if this query is optional, false if it is required. Default is false.\n * A required query throws an error if no elements are retrieved when\n * the query is executed. An optional query does not.\n *\n */\n optional?: boolean;\n /**\n * A maximum total number of results to return from the query.\n * If negative, results are limited from the end of the query list towards the beginning.\n * By default, results are not limited.\n */\n limit?: number;\n}\n\n/**\n * Encapsulates parameters for staggering the start times of a set of animation steps.\n * Instantiated and returned by the `stagger()` function.\n *\n * @publicApi\n **/\nexport interface AnimationStaggerMetadata extends AnimationMetadata {\n /**\n * The timing data for the steps.\n */\n timings: string|number;\n /**\n * One or more animation steps.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n}\n\n/**\n * Creates a named animation trigger, containing a list of `state()`\n * and `transition()` entries to be evaluated when the expression\n * bound to the trigger changes.\n *\n * @param name An identifying string.\n * @param definitions An animation definition object, containing an array of `state()`\n * and `transition()` declarations.\n *\n * @return An object that encapsulates the trigger data.\n *\n * @usageNotes\n * Define an animation trigger in the `animations` section of `@Component` metadata.\n * In the template, reference the trigger by name and bind it to a trigger expression that\n * evaluates to a defined animation state, using the following format:\n *\n * `[@triggerName]=\"expression\"`\n *\n * Animation trigger bindings convert all values to strings, and then match the\n * previous and current values against any linked transitions.\n * Booleans can be specified as `1` or `true` and `0` or `false`.\n *\n * ### Usage Example\n *\n * The following example creates an animation trigger reference based on the provided\n * name value.\n * The provided animation value is expected to be an array consisting of state and\n * transition declarations.\n *\n * ```typescript\n * @Component({\n * selector: \"my-component\",\n * templateUrl: \"my-component-tpl.html\",\n * animations: [\n * trigger(\"myAnimationTrigger\", [\n * state(...),\n * state(...),\n * transition(...),\n * transition(...)\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"something\";\n * }\n * ```\n *\n * The template associated with this component makes use of the defined trigger\n * by binding to an element within its template code.\n *\n * ```html\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * ### Using an inline function\n * The `transition` animation method also supports reading an inline function which can decide\n * if its associated animation should be run.\n *\n * ```typescript\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\n string]: any}): boolean {\n * // notice that `element` and `params` are also available here\n * return toState == 'yes-please-animate';\n * }\n *\n * @Component({\n * selector: 'my-component',\n * templateUrl: 'my-component-tpl.html',\n * animations: [\n * trigger('myAnimationTrigger', [\n * transition(myInlineMatcherFn, [\n * // the animation sequence code\n * ]),\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"yes-please-animate\";\n * }\n * ```\n *\n * ### Disabling Animations\n * When true, the special animation control binding `@.disabled` binding prevents\n * all animations from rendering.\n * Place the `@.disabled` binding on an element to disable\n * animations on the element itself, as well as any inner animation triggers\n * within the element.\n *\n * The following example shows how to use this feature:\n *\n * ```typescript\n * @Component({\n * selector: 'my-component',\n * template: `\n * <div [@.disabled]=\"isDisabled\">\n * <div [@childAnimation]=\"exp\"></div>\n * </div>\n * `,\n * animations: [\n * trigger(\"childAnimation\", [\n * // ...\n * ])\n * ]\n * })\n * class MyComponent {\n * isDisabled = true;\n * exp = '...';\n * }\n * ```\n *\n * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,\n * along with any inner animations.\n *\n * ### Disable animations application-wide\n * When an area of the template is set to have animations disabled,\n * **all** inner components have their animations disabled as well.\n * This means that you can disable all animations for an app\n * by placing a host binding set on `@.disabled` on the topmost Angular component.\n *\n * ```typescript\n * import {Component, HostBinding} from '@angular/core';\n *\n * @Component({\n * selector: 'app-component',\n * templateUrl: 'app.component.html',\n * })\n * class AppComponent {\n * @HostBinding('@.disabled')\n * public animationsDisabled = true;\n * }\n * ```\n *\n * ### Overriding disablement of inner animations\n * Despite inner animations being disabled, a parent animation can `query()`\n * for inner elements located in disabled areas of the template and still animate\n * them if needed. This is also the case for when a sub animation is\n * queried by a parent and then later animated using `animateChild()`.\n *\n * ### Detecting when an animation is disabled\n * If a region of the DOM (or the entire application) has its animations disabled, the animation\n * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides\n * an instance of an `AnimationEvent`. If animations are disabled,\n * the `.disabled` flag on the event is true.\n *\n * @publicApi\n */\nexport function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {\n return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};\n}\n\n/**\n * Defines an animation step that combines styling information with timing information.\n *\n * @param timings Sets `AnimateTimings` for the parent animation.\n * A string in the format \"duration [delay] [easing]\".\n * - Duration and delay are expressed as a number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n * - The easing value controls how the animation accelerates and decelerates\n * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,\n * `ease-in-out`, or a `cubic-bezier()` function call.\n * If not supplied, no easing is applied.\n *\n * For example, the string \"1s 100ms ease-out\" specifies a duration of\n * 1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\n * which decelerates near the end of the duration.\n * @param styles Sets AnimationStyles for the parent animation.\n * A function call to either `style()` or `keyframes()`\n * that returns a collection of CSS style entries to be applied to the parent animation.\n * When null, uses the styles from the destination state.\n * This is useful when describing an animation step that will complete an animation;\n * see \"Animating to the final state\" in `transitions()`.\n * @returns An object that encapsulates the animation step.\n *\n * @usageNotes\n * Call within an animation `sequence()`, `{@link animations/group group()}`, or\n * `transition()` call to specify an animation step\n * that applies given style data to the parent animation for a given amount of time.\n *\n * ### Syntax Examples\n * **Timing examples**\n *\n * The following examples show various `timings` specifications.\n * - `animate(500)` : Duration is 500 milliseconds.\n * - `animate(\"1s\")` : Duration is 1000 milliseconds.\n * - `animate(\"100ms 0.5s\")` : Duration is 100 milliseconds, delay is 500 milliseconds.\n * - `animate(\"5s ease-in\")` : Duration is 5000 milliseconds, easing in.\n * - `animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")` : Duration is 5000 milliseconds, delay is 10\n * milliseconds, easing according to a bezier curve.\n *\n * **Style examples**\n *\n * The following example calls `style()` to set a single CSS style.\n * ```typescript\n * animate(500, style({ background: \"red\" }))\n * ```\n * The following example calls `keyframes()` to set a CSS style\n * to different values for successive keyframes.\n * ```typescript\n * animate(500, keyframes(\n * [\n * style({ background: \"blue\" }),\n * style({ background: \"red\" })\n * ])\n * ```\n *\n * @publicApi\n */\nexport function animate(\n timings: string|number,\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null =\n null): AnimationAnimateMetadata {\n return {type: AnimationMetadataType.Animate, styles, timings};\n}\n\n/**\n * @description Defines a list of animation steps to be run in parallel.\n *\n * @param steps An array of animation step objects.\n * - When steps are defined by `style()` or `animate()`\n * function calls, each call within the group is executed instantly.\n * - To specify offset styles to be applied at a later time, define steps with\n * `keyframes()`, or use `animate()` calls with a delay value.\n * For example:\n *\n * ```typescript\n * group([\n * animate(\"1s\", style({ background: \"black\" })),\n * animate(\"2s\", style({ color: \"white\" }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the group data.\n *\n * @usageNotes\n * Grouped animations are useful when a series of styles must be\n * animated at different starting times and closed off at different ending times.\n *\n * When called within a `sequence()` or a\n * `transition()` call, does not continue to the next\n * instruction until all of the inner animation steps have completed.\n *\n * @publicApi\n */\nexport function group(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationGroupMetadata {\n return {type: AnimationMetadataType.Group, steps, options};\n}\n\n/**\n * Defines a list of animation steps to be run sequentially, one by one.\n *\n * @param steps An array of animation step objects.\n * - Steps defined by `style()` calls apply the styling data immediately.\n * - Steps defined by `animate()` calls apply the styling data over time\n * as specified by the timing data.\n *\n * ```typescript\n * sequence([\n * style({ opacity: 0 }),\n * animate(\"1s\", style({ opacity: 1 }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the sequence data.\n *\n * @usageNotes\n * When you pass an array of steps to a\n * `transition()` call, the steps run sequentially by default.\n * Compare this to the `{@link animations/group group()}` call, which runs animation steps in\n *parallel.\n *\n * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,\n * execution continues to the next instruction only after each of the inner animation\n * steps have completed.\n *\n * @publicApi\n **/\nexport function sequence(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationSequenceMetadata {\n return {type: AnimationMetadataType.Sequence, steps, options};\n}\n\n/**\n * Declares a key/value object containing CSS properties/styles that\n * can then be used for an animation `state`, within an animation `sequence`,\n * or as styling data for calls to `animate()` and `keyframes()`.\n *\n * @param tokens A set of CSS styles or HTML styles associated with an animation state.\n * The value can be any of the following:\n * - A key-value style pair associating a CSS property with a value.\n * - An array of key-value style pairs.\n * - An asterisk (*), to use auto-styling, where styles are derived from the element\n * being animated and applied to the animation when it starts.\n *\n * Auto-styling can be used to define a state that depends on layout or other\n * environmental factors.\n *\n * @return An object that encapsulates the style data.\n *\n * @usageNotes\n * The following examples create animation styles that collect a set of\n * CSS property values:\n *\n * ```typescript\n * // string values for CSS properties\n * style({ background: \"red\", color: \"blue\" })\n *\n * // numerical pixel values\n * style({ width: 100, height: 0 })\n * ```\n *\n * The following example uses auto-styling to allow an element to animate from\n * a height of 0 up to its full height:\n *\n * ```\n * style({ height: 0 }),\n * animate(\"1s\", style({ height: \"*\" }))\n * ```\n *\n * @publicApi\n **/\nexport function style(tokens: '*'|{[key: string]: string | number}|\n Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {\n return {type: AnimationMetadataType.Style, styles: tokens, offset: null};\n}\n\n/**\n * Declares an animation state within a trigger attached to an element.\n *\n * @param name One or more names for the defined state in a comma-separated string.\n * The following reserved state names can be supplied to define a style for specific use\n * cases:\n *\n * - `void` You can associate styles with this name to be used when\n * the element is detached from the application. For example, when an `ngIf` evaluates\n * to false, the state of the associated element is void.\n * - `*` (asterisk) Indicates the default state. You can associate styles with this name\n * to be used as the fallback when the state that is being animated is not declared\n * within the trigger.\n *\n * @param styles A set of CSS styles associated with this state, created using the\n * `style()` function.\n * This set of styles persists on the element once the state has been reached.\n * @param options Parameters that can be passed to the state when it is invoked.\n * 0 or more key-value pairs.\n * @return An object that encapsulates the new state data.\n *\n * @usageNotes\n * Use the `trigger()` function to register states to an animation trigger.\n * Use the `transition()` function to animate between states.\n * When a state is active within a component, its associated styles persist on the element,\n * even when the animation ends.\n *\n * @publicApi\n **/\nexport function state(\n name: string, styles: AnimationStyleMetadata,\n options?: {params: {[name: string]: any}}): AnimationStateMetadata {\n return {type: AnimationMetadataType.State, name, styles, options};\n}\n\n/**\n * Defines a set of animation styles, associating each style with an optional `offset` value.\n *\n * @param steps A set of animation styles with optional offset data.\n * The optional `offset` value for a style specifies a percentage of the total animation\n * time at which that style is applied.\n * @returns An object that encapsulates the keyframes data.\n *\n * @usageNotes\n * Use with the `animate()` call. Instead of applying animations\n * from the current state\n * to the destination state, keyframes describe how each style entry is applied and at what point\n * within the animation arc.\n * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).\n *\n * ### Usage\n *\n * In the following example, the offset values describe\n * when each `backgroundColor` value is applied. The color is red at the start, and changes to\n * blue when 20% of the total time has elapsed.\n *\n * ```typescript\n * // the provided offset values\n * animate(\"5s\", keyframes([\n * style({ backgroundColor: \"red\", offset: 0 }),\n * style({ backgroundColor: \"blue\", offset: 0.2 }),\n * style({ backgroundColor: \"orange\", offset: 0.3 }),\n * style({ backgroundColor: \"black\", offset: 1 })\n * ]))\n * ```\n *\n * If there are no `offset` values specified in the style entries, the offsets\n * are calculated automatically.\n *\n * ```typescript\n * animate(\"5s\", keyframes([\n * style({ backgroundColor: \"red\" }) // offset = 0\n * style({ backgroundColor: \"blue\" }) // offset = 0.33\n * style({ backgroundColor: \"orange\" }) // offset = 0.66\n * style({ backgroundColor: \"black\" }) // offset = 1\n * ]))\n *```\n\n * @publicApi\n */\nexport function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {\n return {type: AnimationMetadataType.Keyframes, steps};\n}\n\n/**\n * Declares an animation transition as a sequence of animation steps to run when a given\n * condition is satisfied. The condition is a Boolean expression or function that compares\n * the previous and current animation states, and returns true if this transition should occur.\n * When the state criteria of a defined transition are met, the associated animation is\n * triggered.\n *\n * @param stateChangeExpr A Boolean expression or function that compares the previous and current\n * animation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\n * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\n * animation trigger element.\n * The animation steps run when the expression evaluates to true.\n *\n * - A state-change string takes the form \"state1 => state2\", where each side is a defined animation\n * state, or an asterix (*) to refer to a dynamic start or end state.\n * - The expression string can contain multiple comma-separated statements;\n * for example \"state1 => state2, state3 => state4\".\n * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,\n * equivalent to \"void => *\" and \"* => void\".\n * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has\n * increased or decreased in value.\n * - A function is executed each time a state change occurs in the animation trigger element.\n * The animation steps run when the function returns true.\n *\n * @param steps One or more animation objects, as returned by the `animate()` or\n * `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the animation,\n * and additional developer-defined parameters. Provided values for additional parameters are used\n * as defaults, and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the transition data.\n *\n * @usageNotes\n * The template associated with a component binds an animation trigger to an element.\n *\n * ```HTML\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * All transitions are defined within an animation trigger,\n * along with named states that the transitions change to and from.\n *\n * ```typescript\n * trigger(\"myAnimationTrigger\", [\n * // define states\n * state(\"on\", style({ background: \"green\" })),\n * state(\"off\", style({ background: \"grey\" })),\n * ...]\n * ```\n *\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\n * or a `transition()` call, execution does not continue to the next instruction\n * until each of the inner animation steps have completed.\n *\n * ### Syntax examples\n *\n * The following examples define transitions between the two defined states (and default states),\n * using various options:\n *\n * ```typescript\n * // Transition occurs when the state value\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n * transition(\"on => off\", animate(500))\n * // Run the same animation for both directions\n * transition(\"on <=> off\", animate(500))\n * // Define multiple state-change pairs separated by commas\n * transition(\"on => off, off => void\", animate(500))\n * ```\n *\n * ### Special values for state-change expressions\n *\n * - Catch-all state change for when an element is inserted into the page and the\n * destination state is unknown:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n *\n * - Capture a state change between any states:\n *\n * `transition(\"* => *\", animate(\"1s 0s\"))`\n *\n * - Entry and exit transitions:\n *\n * ```typescript\n * transition(\":enter\", [\n * style({ opacity: 0 }),\n * animate(500, style({ opacity: 1 }))\n * ]),\n * transition(\":leave\", [\n * animate(500, style({ opacity: 0 }))\n * ])\n * ```\n *\n * - Use `:increment` and `:decrement` to initiate transitions:\n *\n * ```typescript\n * transition(\":increment\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n *\n * transition(\":decrement\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n * ```\n *\n * ### State-change functions\n *\n * Here is an example of a `fromState` specified as a state-change function that invokes an\n * animation when true:\n *\n * ```typescript\n * transition((fromState, toState) =>\n * {\n * return fromState == \"off\" && toState == \"on\";\n * },\n * animate(\"1s 0s\"))\n * ```\n *\n * ### Animating to the final state\n *\n * If the final step in a transition is a call to `animate()` that uses a timing value\n * with no style data, that step is automatically considered the final animation arc,\n * for the element to reach the final state. Angular automatically adds or removes\n * CSS styles to ensure that the element is in the correct final state.\n *\n * The following example defines a transition that starts by hiding the element,\n * then makes sure that it animates properly to whatever state is currently active for trigger:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n * ### Boolean value matching\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\n * that compares true and false or 1 and 0. For example:\n *\n * ```\n * // in the template\n * <div [@openClose]=\"open ? true : false\">...</div>\n * // in the component metadata\n * trigger('openClose', [\n * state('true', style({ height: '*' })),\n * state('false', style({ height: '0px' })),\n * transition('false <=> true', animate(500))\n * ])\n * ```\n *\n * @publicApi\n **/\nexport function transition(\n stateChangeExpr: string|\n ((fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => boolean),\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationTransitionMetadata {\n return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};\n}\n\n/**\n * Produces a reusable animation that can be invoked in another animation or sequence,\n * by calling the `useAnimation()` function.\n *\n * @param steps One or more animation objects, as returned by the `animate()`\n * or `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional developer-defined parameters.\n * Provided values for additional parameters are used as defaults,\n * and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the animation data.\n *\n * @usageNotes\n * The following example defines a reusable animation, providing some default parameter\n * values.\n *\n * ```typescript\n * var fadeAnimation = animation([\n * style({ opacity: '{{ start }}' }),\n * animate('{{ time }}',\n * style({ opacity: '{{ end }}'}))\n * ],\n * { params: { time: '1000ms', start: 0, end: 1 }});\n * ```\n *\n * The following invokes the defined animation with a call to `useAnimation()`,\n * passing in override parameter values.\n *\n * ```js\n * useAnimation(fadeAnimation, {\n * params: {\n * time: '2s',\n * start: 1,\n * end: 0\n * }\n * })\n * ```\n *\n * If any of the passed-in parameter values are missing from this call,\n * the default values are used. If one or more parameter values are missing before a step is\n * animated, `useAnimation()` throws an error.\n *\n * @publicApi\n */\nexport function animation(\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationReferenceMetadata {\n return {type: AnimationMetadataType.Reference, animation: steps, options};\n}\n\n/**\n * Executes a queried inner animation element within an animation sequence.\n *\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional override values for developer-defined parameters.\n * @return An object that encapsulates the child animation data.\n *\n * @usageNotes\n * Each time an animation is triggered in Angular, the parent animation\n * has priority and any child animations are blocked. In order\n * for a child animation to run, the parent animation must query each of the elements\n * containing child animations, and run them using this function.\n *\n * Note that this feature is designed to be used with `query()` and it will only work\n * with animations that are assigned using the Angular animation library. CSS keyframes\n * and transitions are not handled by this API.\n *\n * `animateChild()` does not currently work with route transition animations. Please see\n * GitHub Issue {@link https://github.com/angular/angular/issues/30477 #30477} for more\n * information.\n *\n * @publicApi\n */\nexport function animateChild(options: AnimateChildOptions|null = null):\n AnimationAnimateChildMetadata {\n return {type: AnimationMetadataType.AnimateChild, options};\n}\n\n/**\n * Starts a reusable animation that is created using the `animation()` function.\n *\n * @param animation The reusable animation to start.\n * @param options An options object that can contain a delay value for the start of\n * the animation, and additional override values for developer-defined parameters.\n * @return An object that contains the animation parameters.\n *\n * @publicApi\n */\nexport function useAnimation(\n animation: AnimationReferenceMetadata,\n options: AnimationOptions|null = null): AnimationAnimateRefMetadata {\n return {type: AnimationMetadataType.AnimateRef, animation, options};\n}\n\n/**\n * Finds one or more inner elements within the current element that is\n * being animated within a sequence. Use with `animate()`.\n *\n * @param selector The element to query, or a set of elements that contain Angular-specific\n * characteristics, specified with one or more of the following tokens.\n * - `query(\":enter\")` or `query(\":leave\")` : Query for newly inserted/removed elements.\n * - `query(\":animating\")` : Query all currently animating elements.\n * - `query(\"@triggerName\")` : Query elements that contain an animation trigger.\n * - `query(\"@*\")` : Query all elements that contain an animation triggers.\n * - `query(\":self\")` : Include the current element into the animation sequence.\n *\n * @param animation One or more animation steps to apply to the queried element or elements.\n * An array is treated as an animation sequence.\n * @param options An options object. Use the 'limit' field to limit the total number of\n * items to collect.\n * @return An object that encapsulates the query data.\n *\n * @usageNotes\n * Tokens can be merged into a combined query selector string. For example:\n *\n * ```typescript\n * query(':self, .record:enter, .record:leave, @subTrigger', [...])\n * ```\n *\n * The `query()` function collects multiple elements and works internally by using\n * `element.querySelectorAll`. Use the `limit` field of an options object to limit\n * the total number of items to be collected. For example:\n *\n * ```js\n * query('div', [\n * animate(...),\n * animate(...)\n * ], { limit: 1 })\n * ```\n *\n * By default, throws an error when zero items are found. Set the\n * `optional` flag to ignore this error. For example:\n *\n * ```js\n * query('.some-element-that-may-not-be-there', [\n * animate(...),\n * animate(...)\n * ], { optional: true })\n * ```\n *\n * ### Usage Example\n *\n * The following example queries for inner elements and animates them\n * individually using `animate()`.\n *\n * ```typescript\n * @Component({\n * selector: 'inner',\n * template: `\n * <div [@queryAnimation]=\"exp\">\n * <h1>Title</h1>\n * <div class=\"content\">\n * Blah blah blah\n * </div>\n * </div>\n * `,\n * animations: [\n * trigger('queryAnimation', [\n * transition('* => goAnimate', [\n * // hide the inner elements\n * query('h1', style({ opacity: 0 })),\n * query('.content', style({ opacity: 0 })),\n *\n * // animate the inner elements in, one by one\n * query('h1', animate(1000, style({ opacity: 1 }))),\n * query('.content', animate(1000, style({ opacity: 1 }))),\n * ])\n * ])\n * ]\n * })\n * class Cmp {\n * exp = '';\n *\n * goAnimate() {\n * this.exp = 'goAnimate';\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport function query(\n selector: string, animation: AnimationMetadata|AnimationMetadata[],\n options: AnimationQueryOptions|null = null): AnimationQueryMetadata {\n return {type: AnimationMetadataType.Query, selector, animation, options};\n}\n\n/**\n * Use within an animation `query()` call to issue a timing gap after\n * each queried item is animated.\n *\n * @param timings A delay value.\n * @param animation One ore more animation steps.\n * @returns An object that encapsulates the stagger data.\n *\n * @usageNotes\n * In the following example, a container element wraps a list of items stamped out\n * by an `ngFor`. The container element contains an animation trigger that will later be set\n * to query for each of the inner items.\n *\n * Each time items are added, the opacity fade-in animation runs,\n * and each removed item is faded out.\n * When either of these animations occur, the stagger effect is\n * applied after each item's animation is started.\n *\n * ```html\n * <!-- list.component.html -->\n * <button (click)=\"toggle()\">Show / Hide Items</button>\n * <hr />\n * <div [@listAnimation]=\"items.length\">\n * <div *ngFor=\"let item of items\">\n * {{ item }}\n * </div>\n * </div>\n * ```\n *\n * Here is the component code:\n *\n * ```typescript\n * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';\n * @Component({\n * templateUrl: 'list.component.html',\n * animations: [\n * trigger('listAnimation', [\n * ...\n * ])\n * ]\n * })\n * class ListComponent {\n * items = [];\n *\n * showItems() {\n * this.items = [0,1,2,3,4];\n * }\n *\n * hideItems() {\n * this.items = [];\n * }\n *\n * toggle() {\n * this.items.length ? this.hideItems() : this.showItems();\n * }\n * }\n * ```\n *\n * Here is the animation trigger code:\n *\n * ```typescript\n * trigger('listAnimation', [\n * transition('* => *', [ // each time the binding value changes\n * query(':leave', [\n * stagger(100, [\n * animate('0.5s', style({ opacity: 0 }))\n * ])\n * ]),\n * query(':enter', [\n * style({ opacity: 0 }),\n * stagger(100, [\n * animate('0.5s', style({ opacity: 1 }))\n * ])\n * ])\n * ])\n * ])\n * ```\n *\n * @publicApi\n */\nexport function stagger(timings: string|number, animation: AnimationMetadata|AnimationMetadata[]):\n AnimationStaggerMetadata {\n return {type: AnimationMetadataType.Stagger, timings, animation};\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport function scheduleMicroTask(cb: () => any) {\n Promise.resolve(null).then(cb);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {scheduleMicroTask} from '../util';\n\n/**\n * Provides programmatic control of a reusable animation sequence,\n * built using the `build()` method of `AnimationBuilder`. The `build()` method\n * returns a factory, whose `create()` method instantiates and initializes this interface.\n *\n * @see `AnimationBuilder`\n * @see `AnimationFactory`\n * @see `animate()`\n *\n * @publicApi\n */\nexport interface AnimationPlayer {\n /**\n * Provides a callback to invoke when the animation finishes.\n * @param fn The callback function.\n * @see `finish()`\n */\n onDone(fn: () => void): void;\n /**\n * Provides a callback to invoke when the animation starts.\n * @param fn The callback function.\n * @see `run()`\n */\n onStart(fn: () => void): void;\n /**\n * Provides a callback to invoke after the animation is destroyed.\n * @param fn The callback function.\n * @see `destroy()`\n * @see `beforeDestroy()`\n */\n onDestroy(fn: () => void): void;\n /**\n * Initializes the animation.\n */\n init(): void;\n /**\n * Reports whether the animation has started.\n * @returns True if the animation has started, false otherwise.\n */\n hasStarted(): boolean;\n /**\n * Runs the animation, invoking the `onStart()` callback.\n */\n play(): void;\n /**\n * Pauses the animation.\n */\n pause(): void;\n /**\n * Restarts the paused animation.\n */\n restart(): void;\n /**\n * Ends the animation, invoking the `onDone()` callback.\n */\n finish(): void;\n /**\n * Destroys the animation, after invoking the `beforeDestroy()` callback.\n * Calls the `onDestroy()` callback when destruction is completed.\n */\n destroy(): void;\n /**\n * Resets the animation to its initial state.\n */\n reset(): void;\n /**\n * Sets the position of the animation.\n * @param position A 0-based offset into the duration, in milliseconds.\n */\n setPosition(position: any /** TODO #9100 */): void;\n /**\n * Reports the current position of the animation.\n * @returns A 0-based offset into the duration, in milliseconds.\n */\n getPosition(): number;\n /**\n * The parent of this player, if any.\n */\n parentPlayer: AnimationPlayer|null;\n /**\n * The total run time of the animation, in milliseconds.\n */\n readonly totalTime: number;\n /**\n * Provides a callback to invoke before the animation is destroyed.\n */\n beforeDestroy?: () => any;\n /**\n * @internal\n * Internal\n */\n triggerCallback?: (phaseName: string) => void;\n /**\n * @internal\n * Internal\n */\n disabled?: boolean;\n}\n\n/**\n * An empty programmatic controller for reusable animations.\n * Used internally when animations are disabled, to avoid\n * checking for the null case when an animation player is expected.\n *\n * @see `animate()`\n * @see `AnimationPlayer`\n * @see `GroupPlayer`\n *\n * @publicApi\n */\nexport class NoopAnimationPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _onDestroyFns: Function[] = [];\n private _started = false;\n private _destroyed = false;\n private _finished = false;\n private _position = 0;\n public parentPlayer: AnimationPlayer|null = null;\n public readonly totalTime: number;\n constructor(duration: number = 0, delay: number = 0) {\n this.totalTime = duration + delay;\n }\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n hasStarted(): boolean {\n return this._started;\n }\n init(): void {}\n play(): void {\n if (!this.hasStarted()) {\n this._onStart();\n this.triggerMicrotask();\n }\n this._started = true;\n }\n\n /** @internal */\n triggerMicrotask() {\n scheduleMicroTask(() => this._onFinish());\n }\n\n private _onStart() {\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n\n pause(): void {}\n restart(): void {}\n finish(): void {\n this._onFinish();\n }\n destroy(): void {\n if (!this._destroyed) {\n this._destroyed = true;\n if (!this.hasStarted()) {\n this._onStart();\n }\n this.finish();\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n reset(): void {\n this._started = false;\n }\n setPosition(position: number): void {\n this._position = this.totalTime ? position * this.totalTime : 1;\n }\n getPosition(): number {\n return this.totalTime ? this._position / this.totalTime : 1;\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {scheduleMicroTask} from '../util';\nimport {AnimationPlayer} from './animation_player';\n\n/**\n * A programmatic controller for a group of reusable animations.\n * Used internally to control animations.\n *\n * @see `AnimationPlayer`\n * @see `{@link animations/group group()}`\n *\n */\nexport class AnimationGroupPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _finished = false;\n private _started = false;\n private _destroyed = false;\n private _onDestroyFns: Function[] = [];\n\n public parentPlayer: AnimationPlayer|null = null;\n public totalTime: number = 0;\n public readonly players: AnimationPlayer[];\n\n constructor(_players: AnimationPlayer[]) {\n this.players = _players;\n let doneCount = 0;\n let destroyCount = 0;\n let startCount = 0;\n const total = this.players.length;\n\n if (total == 0) {\n scheduleMicroTask(() => this._onFinish());\n } else {\n this.players.forEach(player => {\n player.onDone(() => {\n if (++doneCount == total) {\n this._onFinish();\n }\n });\n player.onDestroy(() => {\n if (++destroyCount == total) {\n this._onDestroy();\n }\n });\n player.onStart(() => {\n if (++startCount == total) {\n this._onStart();\n }\n });\n });\n }\n\n this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);\n }\n\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n\n init(): void {\n this.players.forEach(player => player.init());\n }\n\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n\n private _onStart() {\n if (!this.hasStarted()) {\n this._started = true;\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n }\n\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n\n hasStarted() {\n return this._started;\n }\n\n play() {\n if (!this.parentPlayer) {\n this.init();\n }\n this._onStart();\n this.players.forEach(player => player.play());\n }\n\n pause(): void {\n this.players.forEach(player => player.pause());\n }\n\n restart(): void {\n this.players.forEach(player => player.restart());\n }\n\n finish(): void {\n this._onFinish();\n this.players.forEach(player => player.finish());\n }\n\n destroy(): void {\n this._onDestroy();\n }\n\n private _onDestroy() {\n if (!this._destroyed) {\n this._destroyed = true;\n this._onFinish();\n this.players.forEach(player => player.destroy());\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n\n reset(): void {\n this.players.forEach(player => player.reset());\n this._destroyed = false;\n this._finished = false;\n this._started = false;\n }\n\n setPosition(p: number): void {\n const timeAtPosition = p * this.totalTime;\n this.players.forEach(player => {\n const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;\n player.setPosition(position);\n });\n }\n\n getPosition(): number {\n const longestPlayer =\n this.players.reduce((longestSoFar: AnimationPlayer|null, player: AnimationPlayer) => {\n const newPlayerIsLongest =\n longestSoFar === null || player.totalTime > longestSoFar.totalTime;\n return newPlayerIsLongest ? player : longestSoFar;\n }, null);\n return longestPlayer != null ? longestPlayer.getPosition() : 0;\n }\n\n beforeDestroy(): void {\n this.players.forEach(player => {\n if (player.beforeDestroy) {\n player.beforeDestroy();\n }\n });\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';\nexport const ɵPRE_STYLE = '!';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all animation APIs of the animation package.\n */\nexport {AnimationBuilder, AnimationFactory} from './animation_builder';\nexport {AnimationEvent} from './animation_event';\nexport {animate, animateChild, AnimateChildOptions, AnimateTimings, animation, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';\nexport {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';\n\nexport * from './private_export';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all public APIs of this package.\n */\nexport * from './src/animations';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n// This file is not used to build this module. It is only used during editing\n// by the TypeScript language service and during build for verification. `ngc`\n// replaces this file with production index.ts when it rewrites private symbol\n// names.\n\nexport * from './public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animations.mjs","sources":["../../../../../../packages/animations/src/animation_builder.ts","../../../../../../packages/animations/src/animation_metadata.ts","../../../../../../packages/animations/src/util.ts","../../../../../../packages/animations/src/players/animation_player.ts","../../../../../../packages/animations/src/players/animation_group_player.ts","../../../../../../packages/animations/src/private_export.ts","../../../../../../packages/animations/src/animations.ts","../../../../../../packages/animations/public_api.ts","../../../../../../packages/animations/index.ts","../../../../../../packages/animations/animations.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {AnimationMetadata, AnimationOptions} from './animation_metadata';\nimport {AnimationPlayer} from './players/animation_player';\n\n/**\n * An injectable service that produces an animation sequence programmatically within an\n * Angular component or directive.\n * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.\n *\n * @usageNotes\n *\n * To use this service, add it to your component or directive as a dependency.\n * The service is instantiated along with your component.\n *\n * Apps do not typically need to create their own animation players, but if you\n * do need to, follow these steps:\n *\n * 1. Use the `build()` method to create a programmatic animation using the\n * `animate()` function. The method returns an `AnimationFactory` instance.\n *\n * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.\n *\n * 3. Use the player object to control the animation programmatically.\n *\n * For example:\n *\n * ```ts\n * // import the service from BrowserAnimationsModule\n * import {AnimationBuilder} from '@angular/animations';\n * // require the service as a dependency\n * class MyCmp {\n * constructor(private _builder: AnimationBuilder) {}\n *\n * makeAnimation(element: any) {\n * // first define a reusable animation\n * const myAnimation = this._builder.build([\n * style({ width: 0 }),\n * animate(1000, style({ width: '100px' }))\n * ]);\n *\n * // use the returned factory object to create a player\n * const player = myAnimation.create(element);\n *\n * player.play();\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport abstract class AnimationBuilder {\n /**\n * Builds a factory for producing a defined animation.\n * @param animation A reusable animation definition.\n * @returns A factory object that can create a player for the defined animation.\n * @see `animate()`\n */\n abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;\n}\n\n/**\n * A factory object returned from the `AnimationBuilder`.`build()` method.\n *\n * @publicApi\n */\nexport abstract class AnimationFactory {\n /**\n * Creates an `AnimationPlayer` instance for the reusable animation defined by\n * the `AnimationBuilder`.`build()` method that created this factory.\n * Attaches the new player a DOM element.\n * @param element The DOM element to which to attach the animation.\n * @param options A set of options that can include a time delay and\n * additional developer-defined parameters.\n */\n abstract create(element: any, options?: AnimationOptions): AnimationPlayer;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Represents a set of CSS styles for use in an animation style.\n */\nexport interface ɵStyleData {\n [key: string]: string|number;\n}\n\n/**\n * Represents animation-step timing parameters for an animation step.\n * @see `animate()`\n *\n * @publicApi\n */\nexport declare type AnimateTimings = {\n /**\n * The full duration of an animation step. A number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n */\n duration: number,\n /**\n * The delay in applying an animation step. A number and optional time unit.\n * The default unit is milliseconds.\n */\n delay: number,\n /**\n * An easing style that controls how an animations step accelerates\n * and decelerates during its run time. An easing function such as `cubic-bezier()`,\n * or one of the following constants:\n * - `ease-in`\n * - `ease-out`\n * - `ease-in-and-out`\n */\n easing: string | null\n};\n\n/**\n * @description Options that control animation styling and timing.\n *\n * The following animation functions accept `AnimationOptions` data:\n *\n * - `transition()`\n * - `sequence()`\n * - `{@link animations/group group()}`\n * - `query()`\n * - `animation()`\n * - `useAnimation()`\n * - `animateChild()`\n *\n * Programmatic animations built using the `AnimationBuilder` service also\n * make use of `AnimationOptions`.\n *\n * @publicApi\n */\nexport declare interface AnimationOptions {\n /**\n * Sets a time-delay for initiating an animation action.\n * A number and optional time unit, such as \"1s\" or \"10ms\" for one second\n * and 10 milliseconds, respectively.The default unit is milliseconds.\n * Default value is 0, meaning no delay.\n */\n delay?: number|string;\n /**\n * A set of developer-defined parameters that modify styling and timing\n * when an animation action starts. An array of key-value pairs, where the provided value\n * is used as a default.\n */\n params?: {[name: string]: any};\n}\n\n/**\n * Adds duration options to control animation styling and timing for a child animation.\n *\n * @see `animateChild()`\n *\n * @publicApi\n */\nexport declare interface AnimateChildOptions extends AnimationOptions {\n duration?: number|string;\n}\n\n/**\n * @description Constants for the categories of parameters that can be defined for animations.\n *\n * A corresponding function defines a set of parameters for each category, and\n * collects them into a corresponding `AnimationMetadata` object.\n *\n * @publicApi\n */\nexport const enum AnimationMetadataType {\n /**\n * Associates a named animation state with a set of CSS styles.\n * See `state()`\n */\n State = 0,\n /**\n * Data for a transition from one animation state to another.\n * See `transition()`\n */\n Transition = 1,\n /**\n * Contains a set of animation steps.\n * See `sequence()`\n */\n Sequence = 2,\n /**\n * Contains a set of animation steps.\n * See `{@link animations/group group()}`\n */\n Group = 3,\n /**\n * Contains an animation step.\n * See `animate()`\n */\n Animate = 4,\n /**\n * Contains a set of animation steps.\n * See `keyframes()`\n */\n Keyframes = 5,\n /**\n * Contains a set of CSS property-value pairs into a named style.\n * See `style()`\n */\n Style = 6,\n /**\n * Associates an animation with an entry trigger that can be attached to an element.\n * See `trigger()`\n */\n Trigger = 7,\n /**\n * Contains a re-usable animation.\n * See `animation()`\n */\n Reference = 8,\n /**\n * Contains data to use in executing child animations returned by a query.\n * See `animateChild()`\n */\n AnimateChild = 9,\n /**\n * Contains animation parameters for a re-usable animation.\n * See `useAnimation()`\n */\n AnimateRef = 10,\n /**\n * Contains child-animation query data.\n * See `query()`\n */\n Query = 11,\n /**\n * Contains data for staggering an animation sequence.\n * See `stagger()`\n */\n Stagger = 12\n}\n\n/**\n * Specifies automatic styling.\n *\n * @publicApi\n */\nexport const AUTO_STYLE = '*';\n\n/**\n * Base for animation data structures.\n *\n * @publicApi\n */\nexport interface AnimationMetadata {\n type: AnimationMetadataType;\n}\n\n/**\n * Contains an animation trigger. Instantiated and returned by the\n * `trigger()` function.\n *\n * @publicApi\n */\nexport interface AnimationTriggerMetadata extends AnimationMetadata {\n /**\n * The trigger name, used to associate it with an element. Unique within the component.\n */\n name: string;\n /**\n * An animation definition object, containing an array of state and transition declarations.\n */\n definitions: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: {params?: {[name: string]: any}}|null;\n}\n\n/**\n * Encapsulates an animation state by associating a state name with a set of CSS styles.\n * Instantiated and returned by the `state()` function.\n *\n * @publicApi\n */\nexport interface AnimationStateMetadata extends AnimationMetadata {\n /**\n * The state name, unique within the component.\n */\n name: string;\n /**\n * The CSS styles associated with this state.\n */\n styles: AnimationStyleMetadata;\n /**\n * An options object containing\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n */\n options?: {params: {[name: string]: any}};\n}\n\n/**\n * Encapsulates an animation transition. Instantiated and returned by the\n * `transition()` function.\n *\n * @publicApi\n */\nexport interface AnimationTransitionMetadata extends AnimationMetadata {\n /**\n * An expression that describes a state change.\n */\n expr: string|\n ((fromState: string, toState: string, element?: any,\n params?: {[key: string]: any}) => boolean);\n /**\n * One or more animation objects to which this transition applies.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation, which is a collection of individual animation steps.\n * Instantiated and returned by the `animation()` function, and\n * passed to the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationReferenceMetadata extends AnimationMetadata {\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation query. Instantiated and returned by\n * the `query()` function.\n *\n * @publicApi\n */\nexport interface AnimationQueryMetadata extends AnimationMetadata {\n /**\n * The CSS selector for this query.\n */\n selector: string;\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * A query options object.\n */\n options: AnimationQueryOptions|null;\n}\n\n/**\n * Encapsulates a keyframes sequence. Instantiated and returned by\n * the `keyframes()` function.\n *\n * @publicApi\n */\nexport interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation styles.\n */\n steps: AnimationStyleMetadata[];\n}\n\n/**\n * Encapsulates an animation style. Instantiated and returned by\n * the `style()` function.\n *\n * @publicApi\n */\nexport interface AnimationStyleMetadata extends AnimationMetadata {\n /**\n * A set of CSS style properties.\n */\n styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;\n /**\n * A percentage of the total animate time at which the style is to be applied.\n */\n offset: number|null;\n}\n\n/**\n * Encapsulates an animation step. Instantiated and returned by\n * the `animate()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateMetadata extends AnimationMetadata {\n /**\n * The timing data for the step.\n */\n timings: string|number|AnimateTimings;\n /**\n * A set of styles used in the step.\n */\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null;\n}\n\n/**\n * Encapsulates a child animation, that can be run explicitly when the parent is run.\n * Instantiated and returned by the `animateChild` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateChildMetadata extends AnimationMetadata {\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation.\n * Instantiated and returned by the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateRefMetadata extends AnimationMetadata {\n /**\n * An animation reference object.\n */\n animation: AnimationReferenceMetadata;\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation sequence.\n * Instantiated and returned by the `sequence()` function.\n *\n * @publicApi\n */\nexport interface AnimationSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation step objects.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation group.\n * Instantiated and returned by the `{@link animations/group group()}` function.\n *\n * @publicApi\n */\nexport interface AnimationGroupMetadata extends AnimationMetadata {\n /**\n * One or more animation or style steps that form this group.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates animation query options.\n * Passed to the `query()` function.\n *\n * @publicApi\n */\nexport declare interface AnimationQueryOptions extends AnimationOptions {\n /**\n * True if this query is optional, false if it is required. Default is false.\n * A required query throws an error if no elements are retrieved when\n * the query is executed. An optional query does not.\n *\n */\n optional?: boolean;\n /**\n * A maximum total number of results to return from the query.\n * If negative, results are limited from the end of the query list towards the beginning.\n * By default, results are not limited.\n */\n limit?: number;\n}\n\n/**\n * Encapsulates parameters for staggering the start times of a set of animation steps.\n * Instantiated and returned by the `stagger()` function.\n *\n * @publicApi\n **/\nexport interface AnimationStaggerMetadata extends AnimationMetadata {\n /**\n * The timing data for the steps.\n */\n timings: string|number;\n /**\n * One or more animation steps.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n}\n\n/**\n * Creates a named animation trigger, containing a list of `state()`\n * and `transition()` entries to be evaluated when the expression\n * bound to the trigger changes.\n *\n * @param name An identifying string.\n * @param definitions An animation definition object, containing an array of `state()`\n * and `transition()` declarations.\n *\n * @return An object that encapsulates the trigger data.\n *\n * @usageNotes\n * Define an animation trigger in the `animations` section of `@Component` metadata.\n * In the template, reference the trigger by name and bind it to a trigger expression that\n * evaluates to a defined animation state, using the following format:\n *\n * `[@triggerName]=\"expression\"`\n *\n * Animation trigger bindings convert all values to strings, and then match the\n * previous and current values against any linked transitions.\n * Booleans can be specified as `1` or `true` and `0` or `false`.\n *\n * ### Usage Example\n *\n * The following example creates an animation trigger reference based on the provided\n * name value.\n * The provided animation value is expected to be an array consisting of state and\n * transition declarations.\n *\n * ```typescript\n * @Component({\n * selector: \"my-component\",\n * templateUrl: \"my-component-tpl.html\",\n * animations: [\n * trigger(\"myAnimationTrigger\", [\n * state(...),\n * state(...),\n * transition(...),\n * transition(...)\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"something\";\n * }\n * ```\n *\n * The template associated with this component makes use of the defined trigger\n * by binding to an element within its template code.\n *\n * ```html\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * ### Using an inline function\n * The `transition` animation method also supports reading an inline function which can decide\n * if its associated animation should be run.\n *\n * ```typescript\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\n string]: any}): boolean {\n * // notice that `element` and `params` are also available here\n * return toState == 'yes-please-animate';\n * }\n *\n * @Component({\n * selector: 'my-component',\n * templateUrl: 'my-component-tpl.html',\n * animations: [\n * trigger('myAnimationTrigger', [\n * transition(myInlineMatcherFn, [\n * // the animation sequence code\n * ]),\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"yes-please-animate\";\n * }\n * ```\n *\n * ### Disabling Animations\n * When true, the special animation control binding `@.disabled` binding prevents\n * all animations from rendering.\n * Place the `@.disabled` binding on an element to disable\n * animations on the element itself, as well as any inner animation triggers\n * within the element.\n *\n * The following example shows how to use this feature:\n *\n * ```typescript\n * @Component({\n * selector: 'my-component',\n * template: `\n * <div [@.disabled]=\"isDisabled\">\n * <div [@childAnimation]=\"exp\"></div>\n * </div>\n * `,\n * animations: [\n * trigger(\"childAnimation\", [\n * // ...\n * ])\n * ]\n * })\n * class MyComponent {\n * isDisabled = true;\n * exp = '...';\n * }\n * ```\n *\n * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,\n * along with any inner animations.\n *\n * ### Disable animations application-wide\n * When an area of the template is set to have animations disabled,\n * **all** inner components have their animations disabled as well.\n * This means that you can disable all animations for an app\n * by placing a host binding set on `@.disabled` on the topmost Angular component.\n *\n * ```typescript\n * import {Component, HostBinding} from '@angular/core';\n *\n * @Component({\n * selector: 'app-component',\n * templateUrl: 'app.component.html',\n * })\n * class AppComponent {\n * @HostBinding('@.disabled')\n * public animationsDisabled = true;\n * }\n * ```\n *\n * ### Overriding disablement of inner animations\n * Despite inner animations being disabled, a parent animation can `query()`\n * for inner elements located in disabled areas of the template and still animate\n * them if needed. This is also the case for when a sub animation is\n * queried by a parent and then later animated using `animateChild()`.\n *\n * ### Detecting when an animation is disabled\n * If a region of the DOM (or the entire application) has its animations disabled, the animation\n * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides\n * an instance of an `AnimationEvent`. If animations are disabled,\n * the `.disabled` flag on the event is true.\n *\n * @publicApi\n */\nexport function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {\n return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};\n}\n\n/**\n * Defines an animation step that combines styling information with timing information.\n *\n * @param timings Sets `AnimateTimings` for the parent animation.\n * A string in the format \"duration [delay] [easing]\".\n * - Duration and delay are expressed as a number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n * - The easing value controls how the animation accelerates and decelerates\n * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,\n * `ease-in-out`, or a `cubic-bezier()` function call.\n * If not supplied, no easing is applied.\n *\n * For example, the string \"1s 100ms ease-out\" specifies a duration of\n * 1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\n * which decelerates near the end of the duration.\n * @param styles Sets AnimationStyles for the parent animation.\n * A function call to either `style()` or `keyframes()`\n * that returns a collection of CSS style entries to be applied to the parent animation.\n * When null, uses the styles from the destination state.\n * This is useful when describing an animation step that will complete an animation;\n * see \"Animating to the final state\" in `transitions()`.\n * @returns An object that encapsulates the animation step.\n *\n * @usageNotes\n * Call within an animation `sequence()`, `{@link animations/group group()}`, or\n * `transition()` call to specify an animation step\n * that applies given style data to the parent animation for a given amount of time.\n *\n * ### Syntax Examples\n * **Timing examples**\n *\n * The following examples show various `timings` specifications.\n * - `animate(500)` : Duration is 500 milliseconds.\n * - `animate(\"1s\")` : Duration is 1000 milliseconds.\n * - `animate(\"100ms 0.5s\")` : Duration is 100 milliseconds, delay is 500 milliseconds.\n * - `animate(\"5s ease-in\")` : Duration is 5000 milliseconds, easing in.\n * - `animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")` : Duration is 5000 milliseconds, delay is 10\n * milliseconds, easing according to a bezier curve.\n *\n * **Style examples**\n *\n * The following example calls `style()` to set a single CSS style.\n * ```typescript\n * animate(500, style({ background: \"red\" }))\n * ```\n * The following example calls `keyframes()` to set a CSS style\n * to different values for successive keyframes.\n * ```typescript\n * animate(500, keyframes(\n * [\n * style({ background: \"blue\" }),\n * style({ background: \"red\" })\n * ])\n * ```\n *\n * @publicApi\n */\nexport function animate(\n timings: string|number,\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null =\n null): AnimationAnimateMetadata {\n return {type: AnimationMetadataType.Animate, styles, timings};\n}\n\n/**\n * @description Defines a list of animation steps to be run in parallel.\n *\n * @param steps An array of animation step objects.\n * - When steps are defined by `style()` or `animate()`\n * function calls, each call within the group is executed instantly.\n * - To specify offset styles to be applied at a later time, define steps with\n * `keyframes()`, or use `animate()` calls with a delay value.\n * For example:\n *\n * ```typescript\n * group([\n * animate(\"1s\", style({ background: \"black\" })),\n * animate(\"2s\", style({ color: \"white\" }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the group data.\n *\n * @usageNotes\n * Grouped animations are useful when a series of styles must be\n * animated at different starting times and closed off at different ending times.\n *\n * When called within a `sequence()` or a\n * `transition()` call, does not continue to the next\n * instruction until all of the inner animation steps have completed.\n *\n * @publicApi\n */\nexport function group(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationGroupMetadata {\n return {type: AnimationMetadataType.Group, steps, options};\n}\n\n/**\n * Defines a list of animation steps to be run sequentially, one by one.\n *\n * @param steps An array of animation step objects.\n * - Steps defined by `style()` calls apply the styling data immediately.\n * - Steps defined by `animate()` calls apply the styling data over time\n * as specified by the timing data.\n *\n * ```typescript\n * sequence([\n * style({ opacity: 0 }),\n * animate(\"1s\", style({ opacity: 1 }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the sequence data.\n *\n * @usageNotes\n * When you pass an array of steps to a\n * `transition()` call, the steps run sequentially by default.\n * Compare this to the `{@link animations/group group()}` call, which runs animation steps in\n *parallel.\n *\n * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,\n * execution continues to the next instruction only after each of the inner animation\n * steps have completed.\n *\n * @publicApi\n **/\nexport function sequence(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationSequenceMetadata {\n return {type: AnimationMetadataType.Sequence, steps, options};\n}\n\n/**\n * Declares a key/value object containing CSS properties/styles that\n * can then be used for an animation `state`, within an animation `sequence`,\n * or as styling data for calls to `animate()` and `keyframes()`.\n *\n * @param tokens A set of CSS styles or HTML styles associated with an animation state.\n * The value can be any of the following:\n * - A key-value style pair associating a CSS property with a value.\n * - An array of key-value style pairs.\n * - An asterisk (*), to use auto-styling, where styles are derived from the element\n * being animated and applied to the animation when it starts.\n *\n * Auto-styling can be used to define a state that depends on layout or other\n * environmental factors.\n *\n * @return An object that encapsulates the style data.\n *\n * @usageNotes\n * The following examples create animation styles that collect a set of\n * CSS property values:\n *\n * ```typescript\n * // string values for CSS properties\n * style({ background: \"red\", color: \"blue\" })\n *\n * // numerical pixel values\n * style({ width: 100, height: 0 })\n * ```\n *\n * The following example uses auto-styling to allow an element to animate from\n * a height of 0 up to its full height:\n *\n * ```\n * style({ height: 0 }),\n * animate(\"1s\", style({ height: \"*\" }))\n * ```\n *\n * @publicApi\n **/\nexport function style(tokens: '*'|{[key: string]: string | number}|\n Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {\n return {type: AnimationMetadataType.Style, styles: tokens, offset: null};\n}\n\n/**\n * Declares an animation state within a trigger attached to an element.\n *\n * @param name One or more names for the defined state in a comma-separated string.\n * The following reserved state names can be supplied to define a style for specific use\n * cases:\n *\n * - `void` You can associate styles with this name to be used when\n * the element is detached from the application. For example, when an `ngIf` evaluates\n * to false, the state of the associated element is void.\n * - `*` (asterisk) Indicates the default state. You can associate styles with this name\n * to be used as the fallback when the state that is being animated is not declared\n * within the trigger.\n *\n * @param styles A set of CSS styles associated with this state, created using the\n * `style()` function.\n * This set of styles persists on the element once the state has been reached.\n * @param options Parameters that can be passed to the state when it is invoked.\n * 0 or more key-value pairs.\n * @return An object that encapsulates the new state data.\n *\n * @usageNotes\n * Use the `trigger()` function to register states to an animation trigger.\n * Use the `transition()` function to animate between states.\n * When a state is active within a component, its associated styles persist on the element,\n * even when the animation ends.\n *\n * @publicApi\n **/\nexport function state(\n name: string, styles: AnimationStyleMetadata,\n options?: {params: {[name: string]: any}}): AnimationStateMetadata {\n return {type: AnimationMetadataType.State, name, styles, options};\n}\n\n/**\n * Defines a set of animation styles, associating each style with an optional `offset` value.\n *\n * @param steps A set of animation styles with optional offset data.\n * The optional `offset` value for a style specifies a percentage of the total animation\n * time at which that style is applied.\n * @returns An object that encapsulates the keyframes data.\n *\n * @usageNotes\n * Use with the `animate()` call. Instead of applying animations\n * from the current state\n * to the destination state, keyframes describe how each style entry is applied and at what point\n * within the animation arc.\n * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).\n *\n * ### Usage\n *\n * In the following example, the offset values describe\n * when each `backgroundColor` value is applied. The color is red at the start, and changes to\n * blue when 20% of the total time has elapsed.\n *\n * ```typescript\n * // the provided offset values\n * animate(\"5s\", keyframes([\n * style({ backgroundColor: \"red\", offset: 0 }),\n * style({ backgroundColor: \"blue\", offset: 0.2 }),\n * style({ backgroundColor: \"orange\", offset: 0.3 }),\n * style({ backgroundColor: \"black\", offset: 1 })\n * ]))\n * ```\n *\n * If there are no `offset` values specified in the style entries, the offsets\n * are calculated automatically.\n *\n * ```typescript\n * animate(\"5s\", keyframes([\n * style({ backgroundColor: \"red\" }) // offset = 0\n * style({ backgroundColor: \"blue\" }) // offset = 0.33\n * style({ backgroundColor: \"orange\" }) // offset = 0.66\n * style({ backgroundColor: \"black\" }) // offset = 1\n * ]))\n *```\n\n * @publicApi\n */\nexport function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {\n return {type: AnimationMetadataType.Keyframes, steps};\n}\n\n/**\n * Declares an animation transition as a sequence of animation steps to run when a given\n * condition is satisfied. The condition is a Boolean expression or function that compares\n * the previous and current animation states, and returns true if this transition should occur.\n * When the state criteria of a defined transition are met, the associated animation is\n * triggered.\n *\n * @param stateChangeExpr A Boolean expression or function that compares the previous and current\n * animation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\n * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\n * animation trigger element.\n * The animation steps run when the expression evaluates to true.\n *\n * - A state-change string takes the form \"state1 => state2\", where each side is a defined animation\n * state, or an asterisk (*) to refer to a dynamic start or end state.\n * - The expression string can contain multiple comma-separated statements;\n * for example \"state1 => state2, state3 => state4\".\n * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,\n * equivalent to \"void => *\" and \"* => void\".\n * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has\n * increased or decreased in value.\n * - A function is executed each time a state change occurs in the animation trigger element.\n * The animation steps run when the function returns true.\n *\n * @param steps One or more animation objects, as returned by the `animate()` or\n * `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the animation,\n * and additional developer-defined parameters. Provided values for additional parameters are used\n * as defaults, and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the transition data.\n *\n * @usageNotes\n * The template associated with a component binds an animation trigger to an element.\n *\n * ```HTML\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * All transitions are defined within an animation trigger,\n * along with named states that the transitions change to and from.\n *\n * ```typescript\n * trigger(\"myAnimationTrigger\", [\n * // define states\n * state(\"on\", style({ background: \"green\" })),\n * state(\"off\", style({ background: \"grey\" })),\n * ...]\n * ```\n *\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\n * or a `transition()` call, execution does not continue to the next instruction\n * until each of the inner animation steps have completed.\n *\n * ### Syntax examples\n *\n * The following examples define transitions between the two defined states (and default states),\n * using various options:\n *\n * ```typescript\n * // Transition occurs when the state value\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n * transition(\"on => off\", animate(500))\n * // Run the same animation for both directions\n * transition(\"on <=> off\", animate(500))\n * // Define multiple state-change pairs separated by commas\n * transition(\"on => off, off => void\", animate(500))\n * ```\n *\n * ### Special values for state-change expressions\n *\n * - Catch-all state change for when an element is inserted into the page and the\n * destination state is unknown:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n *\n * - Capture a state change between any states:\n *\n * `transition(\"* => *\", animate(\"1s 0s\"))`\n *\n * - Entry and exit transitions:\n *\n * ```typescript\n * transition(\":enter\", [\n * style({ opacity: 0 }),\n * animate(500, style({ opacity: 1 }))\n * ]),\n * transition(\":leave\", [\n * animate(500, style({ opacity: 0 }))\n * ])\n * ```\n *\n * - Use `:increment` and `:decrement` to initiate transitions:\n *\n * ```typescript\n * transition(\":increment\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n *\n * transition(\":decrement\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n * ```\n *\n * ### State-change functions\n *\n * Here is an example of a `fromState` specified as a state-change function that invokes an\n * animation when true:\n *\n * ```typescript\n * transition((fromState, toState) =>\n * {\n * return fromState == \"off\" && toState == \"on\";\n * },\n * animate(\"1s 0s\"))\n * ```\n *\n * ### Animating to the final state\n *\n * If the final step in a transition is a call to `animate()` that uses a timing value\n * with no style data, that step is automatically considered the final animation arc,\n * for the element to reach the final state. Angular automatically adds or removes\n * CSS styles to ensure that the element is in the correct final state.\n *\n * The following example defines a transition that starts by hiding the element,\n * then makes sure that it animates properly to whatever state is currently active for trigger:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n * ### Boolean value matching\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\n * that compares true and false or 1 and 0. For example:\n *\n * ```\n * // in the template\n * <div [@openClose]=\"open ? true : false\">...</div>\n * // in the component metadata\n * trigger('openClose', [\n * state('true', style({ height: '*' })),\n * state('false', style({ height: '0px' })),\n * transition('false <=> true', animate(500))\n * ])\n * ```\n *\n * @publicApi\n **/\nexport function transition(\n stateChangeExpr: string|\n ((fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => boolean),\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationTransitionMetadata {\n return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};\n}\n\n/**\n * Produces a reusable animation that can be invoked in another animation or sequence,\n * by calling the `useAnimation()` function.\n *\n * @param steps One or more animation objects, as returned by the `animate()`\n * or `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional developer-defined parameters.\n * Provided values for additional parameters are used as defaults,\n * and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the animation data.\n *\n * @usageNotes\n * The following example defines a reusable animation, providing some default parameter\n * values.\n *\n * ```typescript\n * var fadeAnimation = animation([\n * style({ opacity: '{{ start }}' }),\n * animate('{{ time }}',\n * style({ opacity: '{{ end }}'}))\n * ],\n * { params: { time: '1000ms', start: 0, end: 1 }});\n * ```\n *\n * The following invokes the defined animation with a call to `useAnimation()`,\n * passing in override parameter values.\n *\n * ```js\n * useAnimation(fadeAnimation, {\n * params: {\n * time: '2s',\n * start: 1,\n * end: 0\n * }\n * })\n * ```\n *\n * If any of the passed-in parameter values are missing from this call,\n * the default values are used. If one or more parameter values are missing before a step is\n * animated, `useAnimation()` throws an error.\n *\n * @publicApi\n */\nexport function animation(\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationReferenceMetadata {\n return {type: AnimationMetadataType.Reference, animation: steps, options};\n}\n\n/**\n * Executes a queried inner animation element within an animation sequence.\n *\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional override values for developer-defined parameters.\n * @return An object that encapsulates the child animation data.\n *\n * @usageNotes\n * Each time an animation is triggered in Angular, the parent animation\n * has priority and any child animations are blocked. In order\n * for a child animation to run, the parent animation must query each of the elements\n * containing child animations, and run them using this function.\n *\n * Note that this feature is designed to be used with `query()` and it will only work\n * with animations that are assigned using the Angular animation library. CSS keyframes\n * and transitions are not handled by this API.\n *\n * @publicApi\n */\nexport function animateChild(options: AnimateChildOptions|null = null):\n AnimationAnimateChildMetadata {\n return {type: AnimationMetadataType.AnimateChild, options};\n}\n\n/**\n * Starts a reusable animation that is created using the `animation()` function.\n *\n * @param animation The reusable animation to start.\n * @param options An options object that can contain a delay value for the start of\n * the animation, and additional override values for developer-defined parameters.\n * @return An object that contains the animation parameters.\n *\n * @publicApi\n */\nexport function useAnimation(\n animation: AnimationReferenceMetadata,\n options: AnimationOptions|null = null): AnimationAnimateRefMetadata {\n return {type: AnimationMetadataType.AnimateRef, animation, options};\n}\n\n/**\n * Finds one or more inner elements within the current element that is\n * being animated within a sequence. Use with `animate()`.\n *\n * @param selector The element to query, or a set of elements that contain Angular-specific\n * characteristics, specified with one or more of the following tokens.\n * - `query(\":enter\")` or `query(\":leave\")` : Query for newly inserted/removed elements.\n * - `query(\":animating\")` : Query all currently animating elements.\n * - `query(\"@triggerName\")` : Query elements that contain an animation trigger.\n * - `query(\"@*\")` : Query all elements that contain an animation triggers.\n * - `query(\":self\")` : Include the current element into the animation sequence.\n *\n * @param animation One or more animation steps to apply to the queried element or elements.\n * An array is treated as an animation sequence.\n * @param options An options object. Use the 'limit' field to limit the total number of\n * items to collect.\n * @return An object that encapsulates the query data.\n *\n * @usageNotes\n * Tokens can be merged into a combined query selector string. For example:\n *\n * ```typescript\n * query(':self, .record:enter, .record:leave, @subTrigger', [...])\n * ```\n *\n * The `query()` function collects multiple elements and works internally by using\n * `element.querySelectorAll`. Use the `limit` field of an options object to limit\n * the total number of items to be collected. For example:\n *\n * ```js\n * query('div', [\n * animate(...),\n * animate(...)\n * ], { limit: 1 })\n * ```\n *\n * By default, throws an error when zero items are found. Set the\n * `optional` flag to ignore this error. For example:\n *\n * ```js\n * query('.some-element-that-may-not-be-there', [\n * animate(...),\n * animate(...)\n * ], { optional: true })\n * ```\n *\n * ### Usage Example\n *\n * The following example queries for inner elements and animates them\n * individually using `animate()`.\n *\n * ```typescript\n * @Component({\n * selector: 'inner',\n * template: `\n * <div [@queryAnimation]=\"exp\">\n * <h1>Title</h1>\n * <div class=\"content\">\n * Blah blah blah\n * </div>\n * </div>\n * `,\n * animations: [\n * trigger('queryAnimation', [\n * transition('* => goAnimate', [\n * // hide the inner elements\n * query('h1', style({ opacity: 0 })),\n * query('.content', style({ opacity: 0 })),\n *\n * // animate the inner elements in, one by one\n * query('h1', animate(1000, style({ opacity: 1 }))),\n * query('.content', animate(1000, style({ opacity: 1 }))),\n * ])\n * ])\n * ]\n * })\n * class Cmp {\n * exp = '';\n *\n * goAnimate() {\n * this.exp = 'goAnimate';\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport function query(\n selector: string, animation: AnimationMetadata|AnimationMetadata[],\n options: AnimationQueryOptions|null = null): AnimationQueryMetadata {\n return {type: AnimationMetadataType.Query, selector, animation, options};\n}\n\n/**\n * Use within an animation `query()` call to issue a timing gap after\n * each queried item is animated.\n *\n * @param timings A delay value.\n * @param animation One ore more animation steps.\n * @returns An object that encapsulates the stagger data.\n *\n * @usageNotes\n * In the following example, a container element wraps a list of items stamped out\n * by an `ngFor`. The container element contains an animation trigger that will later be set\n * to query for each of the inner items.\n *\n * Each time items are added, the opacity fade-in animation runs,\n * and each removed item is faded out.\n * When either of these animations occur, the stagger effect is\n * applied after each item's animation is started.\n *\n * ```html\n * <!-- list.component.html -->\n * <button (click)=\"toggle()\">Show / Hide Items</button>\n * <hr />\n * <div [@listAnimation]=\"items.length\">\n * <div *ngFor=\"let item of items\">\n * {{ item }}\n * </div>\n * </div>\n * ```\n *\n * Here is the component code:\n *\n * ```typescript\n * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';\n * @Component({\n * templateUrl: 'list.component.html',\n * animations: [\n * trigger('listAnimation', [\n * ...\n * ])\n * ]\n * })\n * class ListComponent {\n * items = [];\n *\n * showItems() {\n * this.items = [0,1,2,3,4];\n * }\n *\n * hideItems() {\n * this.items = [];\n * }\n *\n * toggle() {\n * this.items.length ? this.hideItems() : this.showItems();\n * }\n * }\n * ```\n *\n * Here is the animation trigger code:\n *\n * ```typescript\n * trigger('listAnimation', [\n * transition('* => *', [ // each time the binding value changes\n * query(':leave', [\n * stagger(100, [\n * animate('0.5s', style({ opacity: 0 }))\n * ])\n * ]),\n * query(':enter', [\n * style({ opacity: 0 }),\n * stagger(100, [\n * animate('0.5s', style({ opacity: 1 }))\n * ])\n * ])\n * ])\n * ])\n * ```\n *\n * @publicApi\n */\nexport function stagger(timings: string|number, animation: AnimationMetadata|AnimationMetadata[]):\n AnimationStaggerMetadata {\n return {type: AnimationMetadataType.Stagger, timings, animation};\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport function scheduleMicroTask(cb: () => any) {\n Promise.resolve(null).then(cb);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {scheduleMicroTask} from '../util';\n\n/**\n * Provides programmatic control of a reusable animation sequence,\n * built using the `build()` method of `AnimationBuilder`. The `build()` method\n * returns a factory, whose `create()` method instantiates and initializes this interface.\n *\n * @see `AnimationBuilder`\n * @see `AnimationFactory`\n * @see `animate()`\n *\n * @publicApi\n */\nexport interface AnimationPlayer {\n /**\n * Provides a callback to invoke when the animation finishes.\n * @param fn The callback function.\n * @see `finish()`\n */\n onDone(fn: () => void): void;\n /**\n * Provides a callback to invoke when the animation starts.\n * @param fn The callback function.\n * @see `run()`\n */\n onStart(fn: () => void): void;\n /**\n * Provides a callback to invoke after the animation is destroyed.\n * @param fn The callback function.\n * @see `destroy()`\n * @see `beforeDestroy()`\n */\n onDestroy(fn: () => void): void;\n /**\n * Initializes the animation.\n */\n init(): void;\n /**\n * Reports whether the animation has started.\n * @returns True if the animation has started, false otherwise.\n */\n hasStarted(): boolean;\n /**\n * Runs the animation, invoking the `onStart()` callback.\n */\n play(): void;\n /**\n * Pauses the animation.\n */\n pause(): void;\n /**\n * Restarts the paused animation.\n */\n restart(): void;\n /**\n * Ends the animation, invoking the `onDone()` callback.\n */\n finish(): void;\n /**\n * Destroys the animation, after invoking the `beforeDestroy()` callback.\n * Calls the `onDestroy()` callback when destruction is completed.\n */\n destroy(): void;\n /**\n * Resets the animation to its initial state.\n */\n reset(): void;\n /**\n * Sets the position of the animation.\n * @param position A 0-based offset into the duration, in milliseconds.\n */\n setPosition(position: any /** TODO #9100 */): void;\n /**\n * Reports the current position of the animation.\n * @returns A 0-based offset into the duration, in milliseconds.\n */\n getPosition(): number;\n /**\n * The parent of this player, if any.\n */\n parentPlayer: AnimationPlayer|null;\n /**\n * The total run time of the animation, in milliseconds.\n */\n readonly totalTime: number;\n /**\n * Provides a callback to invoke before the animation is destroyed.\n */\n beforeDestroy?: () => any;\n /**\n * @internal\n * Internal\n */\n triggerCallback?: (phaseName: string) => void;\n /**\n * @internal\n * Internal\n */\n disabled?: boolean;\n}\n\n/**\n * An empty programmatic controller for reusable animations.\n * Used internally when animations are disabled, to avoid\n * checking for the null case when an animation player is expected.\n *\n * @see `animate()`\n * @see `AnimationPlayer`\n * @see `GroupPlayer`\n *\n * @publicApi\n */\nexport class NoopAnimationPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _onDestroyFns: Function[] = [];\n private _started = false;\n private _destroyed = false;\n private _finished = false;\n private _position = 0;\n public parentPlayer: AnimationPlayer|null = null;\n public readonly totalTime: number;\n constructor(duration: number = 0, delay: number = 0) {\n this.totalTime = duration + delay;\n }\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n hasStarted(): boolean {\n return this._started;\n }\n init(): void {}\n play(): void {\n if (!this.hasStarted()) {\n this._onStart();\n this.triggerMicrotask();\n }\n this._started = true;\n }\n\n /** @internal */\n triggerMicrotask() {\n scheduleMicroTask(() => this._onFinish());\n }\n\n private _onStart() {\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n\n pause(): void {}\n restart(): void {}\n finish(): void {\n this._onFinish();\n }\n destroy(): void {\n if (!this._destroyed) {\n this._destroyed = true;\n if (!this.hasStarted()) {\n this._onStart();\n }\n this.finish();\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n reset(): void {\n this._started = false;\n }\n setPosition(position: number): void {\n this._position = this.totalTime ? position * this.totalTime : 1;\n }\n getPosition(): number {\n return this.totalTime ? this._position / this.totalTime : 1;\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {scheduleMicroTask} from '../util';\nimport {AnimationPlayer} from './animation_player';\n\n/**\n * A programmatic controller for a group of reusable animations.\n * Used internally to control animations.\n *\n * @see `AnimationPlayer`\n * @see `{@link animations/group group()}`\n *\n */\nexport class AnimationGroupPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _finished = false;\n private _started = false;\n private _destroyed = false;\n private _onDestroyFns: Function[] = [];\n\n public parentPlayer: AnimationPlayer|null = null;\n public totalTime: number = 0;\n public readonly players: AnimationPlayer[];\n\n constructor(_players: AnimationPlayer[]) {\n this.players = _players;\n let doneCount = 0;\n let destroyCount = 0;\n let startCount = 0;\n const total = this.players.length;\n\n if (total == 0) {\n scheduleMicroTask(() => this._onFinish());\n } else {\n this.players.forEach(player => {\n player.onDone(() => {\n if (++doneCount == total) {\n this._onFinish();\n }\n });\n player.onDestroy(() => {\n if (++destroyCount == total) {\n this._onDestroy();\n }\n });\n player.onStart(() => {\n if (++startCount == total) {\n this._onStart();\n }\n });\n });\n }\n\n this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);\n }\n\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n\n init(): void {\n this.players.forEach(player => player.init());\n }\n\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n\n private _onStart() {\n if (!this.hasStarted()) {\n this._started = true;\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n }\n\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n\n hasStarted() {\n return this._started;\n }\n\n play() {\n if (!this.parentPlayer) {\n this.init();\n }\n this._onStart();\n this.players.forEach(player => player.play());\n }\n\n pause(): void {\n this.players.forEach(player => player.pause());\n }\n\n restart(): void {\n this.players.forEach(player => player.restart());\n }\n\n finish(): void {\n this._onFinish();\n this.players.forEach(player => player.finish());\n }\n\n destroy(): void {\n this._onDestroy();\n }\n\n private _onDestroy() {\n if (!this._destroyed) {\n this._destroyed = true;\n this._onFinish();\n this.players.forEach(player => player.destroy());\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n\n reset(): void {\n this.players.forEach(player => player.reset());\n this._destroyed = false;\n this._finished = false;\n this._started = false;\n }\n\n setPosition(p: number): void {\n const timeAtPosition = p * this.totalTime;\n this.players.forEach(player => {\n const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;\n player.setPosition(position);\n });\n }\n\n getPosition(): number {\n const longestPlayer =\n this.players.reduce((longestSoFar: AnimationPlayer|null, player: AnimationPlayer) => {\n const newPlayerIsLongest =\n longestSoFar === null || player.totalTime > longestSoFar.totalTime;\n return newPlayerIsLongest ? player : longestSoFar;\n }, null);\n return longestPlayer != null ? longestPlayer.getPosition() : 0;\n }\n\n beforeDestroy(): void {\n this.players.forEach(player => {\n if (player.beforeDestroy) {\n player.beforeDestroy();\n }\n });\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';\nexport const ɵPRE_STYLE = '!';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all animation APIs of the animation package.\n */\nexport {AnimationBuilder, AnimationFactory} from './animation_builder';\nexport {AnimationEvent} from './animation_event';\nexport {animate, animateChild, AnimateChildOptions, AnimateTimings, animation, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';\nexport {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';\n\nexport * from './private_export';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all public APIs of this package.\n */\nexport * from './src/animations';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n// This file is not used to build this module. It is only used during editing\n// by the TypeScript language service and during build for verification. `ngc`\n// replaces this file with production index.ts when it rewrites private symbol\n// names.\n\nexport * from './public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/fesm2015/browser.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v13.1.0-next.
|
|
2
|
+
* @license Angular v13.1.0-next.3
|
|
3
3
|
* (c) 2010-2021 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -258,9 +258,9 @@ class NoopAnimationDriver {
|
|
|
258
258
|
return new NoopAnimationPlayer(duration, delay);
|
|
259
259
|
}
|
|
260
260
|
}
|
|
261
|
-
NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.
|
|
262
|
-
NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.
|
|
261
|
+
NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
262
|
+
NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver });
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
|
|
264
264
|
type: Injectable
|
|
265
265
|
}] });
|
|
266
266
|
/**
|
|
@@ -1054,7 +1054,8 @@ function normalizeSelector(selector) {
|
|
|
1054
1054
|
if (hasAmpersand) {
|
|
1055
1055
|
selector = selector.replace(SELF_TOKEN_REGEX, '');
|
|
1056
1056
|
}
|
|
1057
|
-
// the :enter and :leave
|
|
1057
|
+
// Note: the :enter and :leave aren't normalized here since those
|
|
1058
|
+
// selectors are filled in at runtime during timeline building
|
|
1058
1059
|
selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
|
|
1059
1060
|
.replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
|
|
1060
1061
|
.replace(/:animating/g, NG_ANIMATING_SELECTOR);
|
|
@@ -1229,14 +1230,14 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
|
|
|
1229
1230
|
* [TimelineBuilder]
|
|
1230
1231
|
* This class is responsible for tracking the styles and building a series of keyframe objects for a
|
|
1231
1232
|
* timeline between a start and end time. The builder starts off with an initial timeline and each
|
|
1232
|
-
* time the AST comes across a `group()`, `keyframes()` or a combination of the two
|
|
1233
|
+
* time the AST comes across a `group()`, `keyframes()` or a combination of the two within a
|
|
1233
1234
|
* `sequence()` then it will generate a sub timeline for each step as well as a new one after
|
|
1234
1235
|
* they are complete.
|
|
1235
1236
|
*
|
|
1236
1237
|
* As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
|
|
1237
1238
|
* timeline was created (based on one of the cases above) then the parent timeline will attempt to
|
|
1238
1239
|
* merge the styles used within the sub timelines into itself (only with group() this will happen).
|
|
1239
|
-
* This happens with a merge operation (much like how the merge works in
|
|
1240
|
+
* This happens with a merge operation (much like how the merge works in mergeSort) and it will only
|
|
1240
1241
|
* copy the most recently used styles from the sub timelines into the parent timeline. This ensures
|
|
1241
1242
|
* that if the styles are used later on in another phase of the animation then they will be the most
|
|
1242
1243
|
* up-to-date values.
|
|
@@ -1261,7 +1262,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
|
|
|
1261
1262
|
* from all previous keyframes up until where it is first used. For the timeline keyframe generation
|
|
1262
1263
|
* to properly fill in the style it will place the previous value (the value from the parent
|
|
1263
1264
|
* timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
|
|
1264
|
-
* styles are objects that prototypically
|
|
1265
|
+
* styles are objects that prototypically inherits from the backFill object, this means that if a
|
|
1265
1266
|
* value is added into the backFill then it will automatically propagate any missing values to all
|
|
1266
1267
|
* keyframes. Therefore the missing `height` value will be properly filled into the already
|
|
1267
1268
|
* processed keyframes.
|
|
@@ -1366,7 +1367,7 @@ class AnimationTimelineBuilderVisitor {
|
|
|
1366
1367
|
}
|
|
1367
1368
|
if (ast.steps.length) {
|
|
1368
1369
|
ast.steps.forEach(s => visitDslNode(this, s, ctx));
|
|
1369
|
-
// this is here just
|
|
1370
|
+
// this is here just in case the inner steps only contain or end with a style() call
|
|
1370
1371
|
ctx.currentTimeline.applyStylesToKeyframe();
|
|
1371
1372
|
// this means that some animation function within the sequence
|
|
1372
1373
|
// ended up creating a sub timeline (which means the current
|
|
@@ -1642,7 +1643,7 @@ class AnimationTimelineContext {
|
|
|
1642
1643
|
if (includeSelf) {
|
|
1643
1644
|
results.push(this.element);
|
|
1644
1645
|
}
|
|
1645
|
-
if (selector.length > 0) { // if :self is
|
|
1646
|
+
if (selector.length > 0) { // only if :self is used then the selector can be empty
|
|
1646
1647
|
selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
|
|
1647
1648
|
selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
|
|
1648
1649
|
const multi = limit != 1;
|
|
@@ -1887,7 +1888,7 @@ class SubTimelineBuilder extends TimelineBuilder {
|
|
|
1887
1888
|
When the keyframe is stretched then it means that the delay before the animation
|
|
1888
1889
|
starts is gone. Instead the first keyframe is placed at the start of the animation
|
|
1889
1890
|
and it is then copied to where it starts when the original delay is over. This basically
|
|
1890
|
-
means nothing animates during that delay, but the styles are still
|
|
1891
|
+
means nothing animates during that delay, but the styles are still rendered. For this
|
|
1891
1892
|
to work the original offset values that exist in the original keyframes must be "warped"
|
|
1892
1893
|
so that they can take the new keyframe + delay into account.
|
|
1893
1894
|
|
|
@@ -2491,7 +2492,7 @@ class AnimationTransitionNamespace {
|
|
|
2491
2492
|
// only remove the player if it is queued on the EXACT same trigger/namespace
|
|
2492
2493
|
// we only also deal with queued players here because if the animation has
|
|
2493
2494
|
// started then we want to keep the player alive until the flush happens
|
|
2494
|
-
// (which is where the previousPlayers are passed into the new
|
|
2495
|
+
// (which is where the previousPlayers are passed into the new player)
|
|
2495
2496
|
if (player.namespaceId == this.id && player.triggerName == triggerName && player.queued) {
|
|
2496
2497
|
player.destroy();
|
|
2497
2498
|
}
|
|
@@ -2781,7 +2782,7 @@ class TransitionAnimationEngine {
|
|
|
2781
2782
|
// been inserted so that we know exactly where to place it in
|
|
2782
2783
|
// the namespace list
|
|
2783
2784
|
this.newHostElements.set(hostElement, ns);
|
|
2784
|
-
// given that this host element is
|
|
2785
|
+
// given that this host element is a part of the animation code, it
|
|
2785
2786
|
// may or may not be inserted by a parent node that is of an
|
|
2786
2787
|
// animation renderer type. If this happens then we can still have
|
|
2787
2788
|
// access to this item when we query for :enter nodes. If the parent
|
|
@@ -2846,8 +2847,8 @@ class TransitionAnimationEngine {
|
|
|
2846
2847
|
// normally there should only be one namespace per element, however
|
|
2847
2848
|
// if @triggers are placed on both the component element and then
|
|
2848
2849
|
// its host element (within the component code) then there will be
|
|
2849
|
-
// two namespaces returned. We use a set here to simply
|
|
2850
|
-
//
|
|
2850
|
+
// two namespaces returned. We use a set here to simply deduplicate
|
|
2851
|
+
// the namespaces in case (for the reason described above) there are multiple triggers
|
|
2851
2852
|
const namespaces = new Set();
|
|
2852
2853
|
const elementStates = this.statesByElement.get(element);
|
|
2853
2854
|
if (elementStates) {
|
|
@@ -3162,29 +3163,30 @@ class TransitionAnimationEngine {
|
|
|
3162
3163
|
erroneousTransitions.push(instruction);
|
|
3163
3164
|
return;
|
|
3164
3165
|
}
|
|
3165
|
-
// even though the element may not be
|
|
3166
|
-
//
|
|
3166
|
+
// even though the element may not be in the DOM, it may still
|
|
3167
|
+
// be added at a later point (due to the mechanics of content
|
|
3167
3168
|
// projection and/or dynamic component insertion) therefore it's
|
|
3168
|
-
// important
|
|
3169
|
+
// important to still style the element.
|
|
3169
3170
|
if (nodeIsOrphaned) {
|
|
3170
3171
|
player.onStart(() => eraseStyles(element, instruction.fromStyles));
|
|
3171
3172
|
player.onDestroy(() => setStyles(element, instruction.toStyles));
|
|
3172
3173
|
skippedPlayers.push(player);
|
|
3173
3174
|
return;
|
|
3174
3175
|
}
|
|
3175
|
-
// if
|
|
3176
|
-
// an animation and cancel the
|
|
3176
|
+
// if an unmatched transition is queued and ready to go
|
|
3177
|
+
// then it SHOULD NOT render an animation and cancel the
|
|
3178
|
+
// previously running animations.
|
|
3177
3179
|
if (entry.isFallbackTransition) {
|
|
3178
3180
|
player.onStart(() => eraseStyles(element, instruction.fromStyles));
|
|
3179
3181
|
player.onDestroy(() => setStyles(element, instruction.toStyles));
|
|
3180
3182
|
skippedPlayers.push(player);
|
|
3181
3183
|
return;
|
|
3182
3184
|
}
|
|
3183
|
-
// this means that if a parent animation uses this animation as a sub
|
|
3184
|
-
// then it will instruct the timeline builder to
|
|
3185
|
-
// instead stretch the first keyframe gap
|
|
3186
|
-
//
|
|
3187
|
-
// required by the user
|
|
3185
|
+
// this means that if a parent animation uses this animation as a sub-trigger
|
|
3186
|
+
// then it will instruct the timeline builder not to add a player delay, but
|
|
3187
|
+
// instead stretch the first keyframe gap until the animation starts. This is
|
|
3188
|
+
// important in order to prevent extra initialization styles from being
|
|
3189
|
+
// required by the user for the animation.
|
|
3188
3190
|
instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true);
|
|
3189
3191
|
subTimelines.append(element, instruction.timelines);
|
|
3190
3192
|
const tuple = { instruction, player, element };
|
|
@@ -3220,10 +3222,10 @@ class TransitionAnimationEngine {
|
|
|
3220
3222
|
this.reportError(errors);
|
|
3221
3223
|
}
|
|
3222
3224
|
const allPreviousPlayersMap = new Map();
|
|
3223
|
-
// this map
|
|
3224
|
-
// which animation. Further down
|
|
3225
|
-
// the players are built and in doing so
|
|
3226
|
-
// if a sub player is skipped due to a parent player having priority.
|
|
3225
|
+
// this map tells us which element in the DOM tree is contained by
|
|
3226
|
+
// which animation. Further down this map will get populated once
|
|
3227
|
+
// the players are built and in doing so we can use it to efficiently
|
|
3228
|
+
// figure out if a sub player is skipped due to a parent player having priority.
|
|
3227
3229
|
const animationElementMap = new Map();
|
|
3228
3230
|
queuedInstructions.forEach(entry => {
|
|
3229
3231
|
const element = entry.element;
|
|
@@ -3240,13 +3242,13 @@ class TransitionAnimationEngine {
|
|
|
3240
3242
|
prevPlayer.destroy();
|
|
3241
3243
|
});
|
|
3242
3244
|
});
|
|
3243
|
-
// this is a special case for nodes that will be removed
|
|
3245
|
+
// this is a special case for nodes that will be removed either by
|
|
3244
3246
|
// having their own leave animations or by being queried in a container
|
|
3245
3247
|
// that will be removed once a parent animation is complete. The idea
|
|
3246
3248
|
// here is that * styles must be identical to ! styles because of
|
|
3247
3249
|
// backwards compatibility (* is also filled in by default in many places).
|
|
3248
|
-
// Otherwise * styles will return an empty value or auto since the element
|
|
3249
|
-
//
|
|
3250
|
+
// Otherwise * styles will return an empty value or "auto" since the element
|
|
3251
|
+
// passed to getComputedStyle will not be visible (since * === destination)
|
|
3250
3252
|
const replaceNodes = allLeaveNodes.filter(node => {
|
|
3251
3253
|
return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
|
|
3252
3254
|
});
|
|
@@ -3328,9 +3330,9 @@ class TransitionAnimationEngine {
|
|
|
3328
3330
|
}
|
|
3329
3331
|
}
|
|
3330
3332
|
});
|
|
3331
|
-
// find all of the sub players' corresponding inner animation
|
|
3333
|
+
// find all of the sub players' corresponding inner animation players
|
|
3332
3334
|
subPlayers.forEach(player => {
|
|
3333
|
-
// even if
|
|
3335
|
+
// even if no players are found for a sub animation it
|
|
3334
3336
|
// will still complete itself after the next tick since it's Noop
|
|
3335
3337
|
const playersForElement = skippedPlayersMap.get(player.element);
|
|
3336
3338
|
if (playersForElement && playersForElement.length) {
|