1 | /**
|
2 | * @license Angular v8.2.11
|
3 | * (c) 2010-2019 Google LLC. https://angular.io/
|
4 | * License: MIT
|
5 | */
|
6 |
|
7 | (function (global, factory) {
|
8 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
9 | typeof define === 'function' && define.amd ? define('@angular/animations', ['exports'], factory) :
|
10 | (global = global || self, factory((global.ng = global.ng || {}, global.ng.animations = {})));
|
11 | }(this, function (exports) { 'use strict';
|
12 |
|
13 | /**
|
14 | * An injectable service that produces an animation sequence programmatically within an
|
15 | * Angular component or directive.
|
16 | * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
|
17 | *
|
18 | * @usageNotes
|
19 | *
|
20 | * To use this service, add it to your component or directive as a dependency.
|
21 | * The service is instantiated along with your component.
|
22 | *
|
23 | * Apps do not typically need to create their own animation players, but if you
|
24 | * do need to, follow these steps:
|
25 | *
|
26 | * 1. Use the `build()` method to create a programmatic animation using the
|
27 | * `animate()` function. The method returns an `AnimationFactory` instance.
|
28 | *
|
29 | * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
|
30 | *
|
31 | * 3. Use the player object to control the animation programmatically.
|
32 | *
|
33 | * For example:
|
34 | *
|
35 | * ```ts
|
36 | * // import the service from BrowserAnimationsModule
|
37 | * import {AnimationBuilder} from '@angular/animations';
|
38 | * // require the service as a dependency
|
39 | * class MyCmp {
|
40 | * constructor(private _builder: AnimationBuilder) {}
|
41 | *
|
42 | * makeAnimation(element: any) {
|
43 | * // first define a reusable animation
|
44 | * const myAnimation = this._builder.build([
|
45 | * style({ width: 0 }),
|
46 | * animate(1000, style({ width: '100px' }))
|
47 | * ]);
|
48 | *
|
49 | * // use the returned factory object to create a player
|
50 | * const player = myAnimation.create(element);
|
51 | *
|
52 | * player.play();
|
53 | * }
|
54 | * }
|
55 | * ```
|
56 | *
|
57 | * @publicApi
|
58 | */
|
59 | var AnimationBuilder = /** @class */ (function () {
|
60 | function AnimationBuilder() {
|
61 | }
|
62 | return AnimationBuilder;
|
63 | }());
|
64 | /**
|
65 | * A factory object returned from the `AnimationBuilder`.`build()` method.
|
66 | *
|
67 | * @publicApi
|
68 | */
|
69 | var AnimationFactory = /** @class */ (function () {
|
70 | function AnimationFactory() {
|
71 | }
|
72 | return AnimationFactory;
|
73 | }());
|
74 |
|
75 | /**
|
76 | * @license
|
77 | * Copyright Google Inc. All Rights Reserved.
|
78 | *
|
79 | * Use of this source code is governed by an MIT-style license that can be
|
80 | * found in the LICENSE file at https://angular.io/license
|
81 | */
|
82 | /**
|
83 | * Specifies automatic styling.
|
84 | *
|
85 | * @publicApi
|
86 | */
|
87 | var AUTO_STYLE = '*';
|
88 | /**
|
89 | * Creates a named animation trigger, containing a list of `state()`
|
90 | * and `transition()` entries to be evaluated when the expression
|
91 | * bound to the trigger changes.
|
92 | *
|
93 | * @param name An identifying string.
|
94 | * @param definitions An animation definition object, containing an array of `state()`
|
95 | * and `transition()` declarations.
|
96 | *
|
97 | * @return An object that encapsulates the trigger data.
|
98 | *
|
99 | * @usageNotes
|
100 | * Define an animation trigger in the `animations` section of `@Component` metadata.
|
101 | * In the template, reference the trigger by name and bind it to a trigger expression that
|
102 | * evaluates to a defined animation state, using the following format:
|
103 | *
|
104 | * `[@triggerName]="expression"`
|
105 | *
|
106 | * Animation trigger bindings convert all values to strings, and then match the
|
107 | * previous and current values against any linked transitions.
|
108 | * Booleans can be specified as `1` or `true` and `0` or `false`.
|
109 | *
|
110 | * ### Usage Example
|
111 | *
|
112 | * The following example creates an animation trigger reference based on the provided
|
113 | * name value.
|
114 | * The provided animation value is expected to be an array consisting of state and
|
115 | * transition declarations.
|
116 | *
|
117 | * ```typescript
|
118 | * @Component({
|
119 | * selector: "my-component",
|
120 | * templateUrl: "my-component-tpl.html",
|
121 | * animations: [
|
122 | * trigger("myAnimationTrigger", [
|
123 | * state(...),
|
124 | * state(...),
|
125 | * transition(...),
|
126 | * transition(...)
|
127 | * ])
|
128 | * ]
|
129 | * })
|
130 | * class MyComponent {
|
131 | * myStatusExp = "something";
|
132 | * }
|
133 | * ```
|
134 | *
|
135 | * The template associated with this component makes use of the defined trigger
|
136 | * by binding to an element within its template code.
|
137 | *
|
138 | * ```html
|
139 | * <!-- somewhere inside of my-component-tpl.html -->
|
140 | * <div [@myAnimationTrigger]="myStatusExp">...</div>
|
141 | * ```
|
142 | *
|
143 | * ### Using an inline function
|
144 | * The `transition` animation method also supports reading an inline function which can decide
|
145 | * if its associated animation should be run.
|
146 | *
|
147 | * ```typescript
|
148 | * // this method is run each time the `myAnimationTrigger` trigger value changes.
|
149 | * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
|
150 | string]: any}): boolean {
|
151 | * // notice that `element` and `params` are also available here
|
152 | * return toState == 'yes-please-animate';
|
153 | * }
|
154 | *
|
155 | * @Component({
|
156 | * selector: 'my-component',
|
157 | * templateUrl: 'my-component-tpl.html',
|
158 | * animations: [
|
159 | * trigger('myAnimationTrigger', [
|
160 | * transition(myInlineMatcherFn, [
|
161 | * // the animation sequence code
|
162 | * ]),
|
163 | * ])
|
164 | * ]
|
165 | * })
|
166 | * class MyComponent {
|
167 | * myStatusExp = "yes-please-animate";
|
168 | * }
|
169 | * ```
|
170 | *
|
171 | * ### Disabling Animations
|
172 | * When true, the special animation control binding `@.disabled` binding prevents
|
173 | * all animations from rendering.
|
174 | * Place the `@.disabled` binding on an element to disable
|
175 | * animations on the element itself, as well as any inner animation triggers
|
176 | * within the element.
|
177 | *
|
178 | * The following example shows how to use this feature:
|
179 | *
|
180 | * ```typescript
|
181 | * @Component({
|
182 | * selector: 'my-component',
|
183 | * template: `
|
184 | * <div [@.disabled]="isDisabled">
|
185 | * <div [@childAnimation]="exp"></div>
|
186 | * </div>
|
187 | * `,
|
188 | * animations: [
|
189 | * trigger("childAnimation", [
|
190 | * // ...
|
191 | * ])
|
192 | * ]
|
193 | * })
|
194 | * class MyComponent {
|
195 | * isDisabled = true;
|
196 | * exp = '...';
|
197 | * }
|
198 | * ```
|
199 | *
|
200 | * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
|
201 | * along with any inner animations.
|
202 | *
|
203 | * ### Disable animations application-wide
|
204 | * When an area of the template is set to have animations disabled,
|
205 | * **all** inner components have their animations disabled as well.
|
206 | * This means that you can disable all animations for an app
|
207 | * by placing a host binding set on `@.disabled` on the topmost Angular component.
|
208 | *
|
209 | * ```typescript
|
210 | * import {Component, HostBinding} from '@angular/core';
|
211 | *
|
212 | * @Component({
|
213 | * selector: 'app-component',
|
214 | * templateUrl: 'app.component.html',
|
215 | * })
|
216 | * class AppComponent {
|
217 | * @HostBinding('@.disabled')
|
218 | * public animationsDisabled = true;
|
219 | * }
|
220 | * ```
|
221 | *
|
222 | * ### Overriding disablement of inner animations
|
223 | * Despite inner animations being disabled, a parent animation can `query()`
|
224 | * for inner elements located in disabled areas of the template and still animate
|
225 | * them if needed. This is also the case for when a sub animation is
|
226 | * queried by a parent and then later animated using `animateChild()`.
|
227 | *
|
228 | * ### Detecting when an animation is disabled
|
229 | * If a region of the DOM (or the entire application) has its animations disabled, the animation
|
230 | * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
|
231 | * an instance of an `AnimationEvent`. If animations are disabled,
|
232 | * the `.disabled` flag on the event is true.
|
233 | *
|
234 | * @publicApi
|
235 | */
|
236 | function trigger(name, definitions) {
|
237 | return { type: 7 /* Trigger */, name: name, definitions: definitions, options: {} };
|
238 | }
|
239 | /**
|
240 | * Defines an animation step that combines styling information with timing information.
|
241 | *
|
242 | * @param timings Sets `AnimateTimings` for the parent animation.
|
243 | * A string in the format "duration [delay] [easing]".
|
244 | * - Duration and delay are expressed as a number and optional time unit,
|
245 | * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
|
246 | * The default unit is milliseconds.
|
247 | * - The easing value controls how the animation accelerates and decelerates
|
248 | * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,
|
249 | * `ease-in-out`, or a `cubic-bezier()` function call.
|
250 | * If not supplied, no easing is applied.
|
251 | *
|
252 | * For example, the string "1s 100ms ease-out" specifies a duration of
|
253 | * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
|
254 | * which decelerates near the end of the duration.
|
255 | * @param styles Sets AnimationStyles for the parent animation.
|
256 | * A function call to either `style()` or `keyframes()`
|
257 | * that returns a collection of CSS style entries to be applied to the parent animation.
|
258 | * When null, uses the styles from the destination state.
|
259 | * This is useful when describing an animation step that will complete an animation;
|
260 | * see "Animating to the final state" in `transitions()`.
|
261 | * @returns An object that encapsulates the animation step.
|
262 | *
|
263 | * @usageNotes
|
264 | * Call within an animation `sequence()`, `{@link animations/group group()}`, or
|
265 | * `transition()` call to specify an animation step
|
266 | * that applies given style data to the parent animation for a given amount of time.
|
267 | *
|
268 | * ### Syntax Examples
|
269 | * **Timing examples**
|
270 | *
|
271 | * The following examples show various `timings` specifications.
|
272 | * - `animate(500)` : Duration is 500 milliseconds.
|
273 | * - `animate("1s")` : Duration is 1000 milliseconds.
|
274 | * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
|
275 | * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
|
276 | * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
|
277 | * milliseconds, easing according to a bezier curve.
|
278 | *
|
279 | * **Style examples**
|
280 | *
|
281 | * The following example calls `style()` to set a single CSS style.
|
282 | * ```typescript
|
283 | * animate(500, style({ background: "red" }))
|
284 | * ```
|
285 | * The following example calls `keyframes()` to set a CSS style
|
286 | * to different values for successive keyframes.
|
287 | * ```typescript
|
288 | * animate(500, keyframes(
|
289 | * [
|
290 | * style({ background: "blue" })),
|
291 | * style({ background: "red" }))
|
292 | * ])
|
293 | * ```
|
294 | *
|
295 | * @publicApi
|
296 | */
|
297 | function animate(timings, styles) {
|
298 | if (styles === void 0) { styles = null; }
|
299 | return { type: 4 /* Animate */, styles: styles, timings: timings };
|
300 | }
|
301 | /**
|
302 | * @description Defines a list of animation steps to be run in parallel.
|
303 | *
|
304 | * @param steps An array of animation step objects.
|
305 | * - When steps are defined by `style()` or `animate()`
|
306 | * function calls, each call within the group is executed instantly.
|
307 | * - To specify offset styles to be applied at a later time, define steps with
|
308 | * `keyframes()`, or use `animate()` calls with a delay value.
|
309 | * For example:
|
310 | *
|
311 | * ```typescript
|
312 | * group([
|
313 | * animate("1s", style({ background: "black" })),
|
314 | * animate("2s", style({ color: "white" }))
|
315 | * ])
|
316 | * ```
|
317 | *
|
318 | * @param options An options object containing a delay and
|
319 | * developer-defined parameters that provide styling defaults and
|
320 | * can be overridden on invocation.
|
321 | *
|
322 | * @return An object that encapsulates the group data.
|
323 | *
|
324 | * @usageNotes
|
325 | * Grouped animations are useful when a series of styles must be
|
326 | * animated at different starting times and closed off at different ending times.
|
327 | *
|
328 | * When called within a `sequence()` or a
|
329 | * `transition()` call, does not continue to the next
|
330 | * instruction until all of the inner animation steps have completed.
|
331 | *
|
332 | * @publicApi
|
333 | */
|
334 | function group(steps, options) {
|
335 | if (options === void 0) { options = null; }
|
336 | return { type: 3 /* Group */, steps: steps, options: options };
|
337 | }
|
338 | /**
|
339 | * Defines a list of animation steps to be run sequentially, one by one.
|
340 | *
|
341 | * @param steps An array of animation step objects.
|
342 | * - Steps defined by `style()` calls apply the styling data immediately.
|
343 | * - Steps defined by `animate()` calls apply the styling data over time
|
344 | * as specified by the timing data.
|
345 | *
|
346 | * ```typescript
|
347 | * sequence([
|
348 | * style({ opacity: 0 }),
|
349 | * animate("1s", style({ opacity: 1 }))
|
350 | * ])
|
351 | * ```
|
352 | *
|
353 | * @param options An options object containing a delay and
|
354 | * developer-defined parameters that provide styling defaults and
|
355 | * can be overridden on invocation.
|
356 | *
|
357 | * @return An object that encapsulates the sequence data.
|
358 | *
|
359 | * @usageNotes
|
360 | * When you pass an array of steps to a
|
361 | * `transition()` call, the steps run sequentially by default.
|
362 | * Compare this to the `{@link animations/group group()}` call, which runs animation steps in parallel.
|
363 | *
|
364 | * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
|
365 | * execution continues to the next instruction only after each of the inner animation
|
366 | * steps have completed.
|
367 | *
|
368 | * @publicApi
|
369 | **/
|
370 | function sequence(steps, options) {
|
371 | if (options === void 0) { options = null; }
|
372 | return { type: 2 /* Sequence */, steps: steps, options: options };
|
373 | }
|
374 | /**
|
375 | * Declares a key/value object containing CSS properties/styles that
|
376 | * can then be used for an animation `state`, within an animation `sequence`,
|
377 | * or as styling data for calls to `animate()` and `keyframes()`.
|
378 | *
|
379 | * @param tokens A set of CSS styles or HTML styles associated with an animation state.
|
380 | * The value can be any of the following:
|
381 | * - A key-value style pair associating a CSS property with a value.
|
382 | * - An array of key-value style pairs.
|
383 | * - An asterisk (*), to use auto-styling, where styles are derived from the element
|
384 | * being animated and applied to the animation when it starts.
|
385 | *
|
386 | * Auto-styling can be used to define a state that depends on layout or other
|
387 | * environmental factors.
|
388 | *
|
389 | * @return An object that encapsulates the style data.
|
390 | *
|
391 | * @usageNotes
|
392 | * The following examples create animation styles that collect a set of
|
393 | * CSS property values:
|
394 | *
|
395 | * ```typescript
|
396 | * // string values for CSS properties
|
397 | * style({ background: "red", color: "blue" })
|
398 | *
|
399 | * // numerical pixel values
|
400 | * style({ width: 100, height: 0 })
|
401 | * ```
|
402 | *
|
403 | * The following example uses auto-styling to allow a component to animate from
|
404 | * a height of 0 up to the height of the parent element:
|
405 | *
|
406 | * ```
|
407 | * style({ height: 0 }),
|
408 | * animate("1s", style({ height: "*" }))
|
409 | * ```
|
410 | *
|
411 | * @publicApi
|
412 | **/
|
413 | function style(tokens) {
|
414 | return { type: 6 /* Style */, styles: tokens, offset: null };
|
415 | }
|
416 | /**
|
417 | * Declares an animation state within a trigger attached to an element.
|
418 | *
|
419 | * @param name One or more names for the defined state in a comma-separated string.
|
420 | * The following reserved state names can be supplied to define a style for specific use
|
421 | * cases:
|
422 | *
|
423 | * - `void` You can associate styles with this name to be used when
|
424 | * the element is detached from the application. For example, when an `ngIf` evaluates
|
425 | * to false, the state of the associated element is void.
|
426 | * - `*` (asterisk) Indicates the default state. You can associate styles with this name
|
427 | * to be used as the fallback when the state that is being animated is not declared
|
428 | * within the trigger.
|
429 | *
|
430 | * @param styles A set of CSS styles associated with this state, created using the
|
431 | * `style()` function.
|
432 | * This set of styles persists on the element once the state has been reached.
|
433 | * @param options Parameters that can be passed to the state when it is invoked.
|
434 | * 0 or more key-value pairs.
|
435 | * @return An object that encapsulates the new state data.
|
436 | *
|
437 | * @usageNotes
|
438 | * Use the `trigger()` function to register states to an animation trigger.
|
439 | * Use the `transition()` function to animate between states.
|
440 | * When a state is active within a component, its associated styles persist on the element,
|
441 | * even when the animation ends.
|
442 | *
|
443 | * @publicApi
|
444 | **/
|
445 | function state(name, styles, options) {
|
446 | return { type: 0 /* State */, name: name, styles: styles, options: options };
|
447 | }
|
448 | /**
|
449 | * Defines a set of animation styles, associating each style with an optional `offset` value.
|
450 | *
|
451 | * @param steps A set of animation styles with optional offset data.
|
452 | * The optional `offset` value for a style specifies a percentage of the total animation
|
453 | * time at which that style is applied.
|
454 | * @returns An object that encapsulates the keyframes data.
|
455 | *
|
456 | * @usageNotes
|
457 | * Use with the `animate()` call. Instead of applying animations
|
458 | * from the current state
|
459 | * to the destination state, keyframes describe how each style entry is applied and at what point
|
460 | * within the animation arc.
|
461 | * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
|
462 | *
|
463 | * ### Usage
|
464 | *
|
465 | * In the following example, the offset values describe
|
466 | * when each `backgroundColor` value is applied. The color is red at the start, and changes to
|
467 | * blue when 20% of the total time has elapsed.
|
468 | *
|
469 | * ```typescript
|
470 | * // the provided offset values
|
471 | * animate("5s", keyframes([
|
472 | * style({ backgroundColor: "red", offset: 0 }),
|
473 | * style({ backgroundColor: "blue", offset: 0.2 }),
|
474 | * style({ backgroundColor: "orange", offset: 0.3 }),
|
475 | * style({ backgroundColor: "black", offset: 1 })
|
476 | * ]))
|
477 | * ```
|
478 | *
|
479 | * If there are no `offset` values specified in the style entries, the offsets
|
480 | * are calculated automatically.
|
481 | *
|
482 | * ```typescript
|
483 | * animate("5s", keyframes([
|
484 | * style({ backgroundColor: "red" }) // offset = 0
|
485 | * style({ backgroundColor: "blue" }) // offset = 0.33
|
486 | * style({ backgroundColor: "orange" }) // offset = 0.66
|
487 | * style({ backgroundColor: "black" }) // offset = 1
|
488 | * ]))
|
489 | *```
|
490 |
|
491 | * @publicApi
|
492 | */
|
493 | function keyframes(steps) {
|
494 | return { type: 5 /* Keyframes */, steps: steps };
|
495 | }
|
496 | /**
|
497 | * Declares an animation transition as a sequence of animation steps to run when a given
|
498 | * condition is satisfied. The condition is a Boolean expression or function that compares
|
499 | * the previous and current animation states, and returns true if this transition should occur.
|
500 | * When the state criteria of a defined transition are met, the associated animation is
|
501 | * triggered.
|
502 | *
|
503 | * @param stateChangeExpr A Boolean expression or function that compares the previous and current
|
504 | * animation states, and returns true if this transition should occur. Note that "true" and "false"
|
505 | * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the
|
506 | * animation trigger element.
|
507 | * The animation steps run when the expression evaluates to true.
|
508 | *
|
509 | * - A state-change string takes the form "state1 => state2", where each side is a defined animation
|
510 | * state, or an asterix (*) to refer to a dynamic start or end state.
|
511 | * - The expression string can contain multiple comma-separated statements;
|
512 | * for example "state1 => state2, state3 => state4".
|
513 | * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,
|
514 | * equivalent to "void => *" and "* => void".
|
515 | * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has
|
516 | * increased or decreased in value.
|
517 | * - A function is executed each time a state change occurs in the animation trigger element.
|
518 | * The animation steps run when the function returns true.
|
519 | *
|
520 | * @param steps One or more animation objects, as returned by the `animate()` or
|
521 | * `sequence()` function, that form a transformation from one state to another.
|
522 | * A sequence is used by default when you pass an array.
|
523 | * @param options An options object that can contain a delay value for the start of the animation,
|
524 | * and additional developer-defined parameters. Provided values for additional parameters are used
|
525 | * as defaults, and override values can be passed to the caller on invocation.
|
526 | * @returns An object that encapsulates the transition data.
|
527 | *
|
528 | * @usageNotes
|
529 | * The template associated with a component binds an animation trigger to an element.
|
530 | *
|
531 | * ```HTML
|
532 | * <!-- somewhere inside of my-component-tpl.html -->
|
533 | * <div [@myAnimationTrigger]="myStatusExp">...</div>
|
534 | * ```
|
535 | *
|
536 | * All transitions are defined within an animation trigger,
|
537 | * along with named states that the transitions change to and from.
|
538 | *
|
539 | * ```typescript
|
540 | * trigger("myAnimationTrigger", [
|
541 | * // define states
|
542 | * state("on", style({ background: "green" })),
|
543 | * state("off", style({ background: "grey" })),
|
544 | * ...]
|
545 | * ```
|
546 | *
|
547 | * Note that when you call the `sequence()` function within a `{@link animations/group group()}`
|
548 | * or a `transition()` call, execution does not continue to the next instruction
|
549 | * until each of the inner animation steps have completed.
|
550 | *
|
551 | * ### Syntax examples
|
552 | *
|
553 | * The following examples define transitions between the two defined states (and default states),
|
554 | * using various options:
|
555 | *
|
556 | * ```typescript
|
557 | * // Transition occurs when the state value
|
558 | * // bound to "myAnimationTrigger" changes from "on" to "off"
|
559 | * transition("on => off", animate(500))
|
560 | * // Run the same animation for both directions
|
561 | * transition("on <=> off", animate(500))
|
562 | * // Define multiple state-change pairs separated by commas
|
563 | * transition("on => off, off => void", animate(500))
|
564 | * ```
|
565 | *
|
566 | * ### Special values for state-change expressions
|
567 | *
|
568 | * - Catch-all state change for when an element is inserted into the page and the
|
569 | * destination state is unknown:
|
570 | *
|
571 | * ```typescript
|
572 | * transition("void => *", [
|
573 | * style({ opacity: 0 }),
|
574 | * animate(500)
|
575 | * ])
|
576 | * ```
|
577 | *
|
578 | * - Capture a state change between any states:
|
579 | *
|
580 | * `transition("* => *", animate("1s 0s"))`
|
581 | *
|
582 | * - Entry and exit transitions:
|
583 | *
|
584 | * ```typescript
|
585 | * transition(":enter", [
|
586 | * style({ opacity: 0 }),
|
587 | * animate(500, style({ opacity: 1 }))
|
588 | * ]),
|
589 | * transition(":leave", [
|
590 | * animate(500, style({ opacity: 0 }))
|
591 | * ])
|
592 | * ```
|
593 | *
|
594 | * - Use `:increment` and `:decrement` to initiate transitions:
|
595 | *
|
596 | * ```typescript
|
597 | * transition(":increment", group([
|
598 | * query(':enter', [
|
599 | * style({ left: '100%' }),
|
600 | * animate('0.5s ease-out', style('*'))
|
601 | * ]),
|
602 | * query(':leave', [
|
603 | * animate('0.5s ease-out', style({ left: '-100%' }))
|
604 | * ])
|
605 | * ]))
|
606 | *
|
607 | * transition(":decrement", group([
|
608 | * query(':enter', [
|
609 | * style({ left: '100%' }),
|
610 | * animate('0.5s ease-out', style('*'))
|
611 | * ]),
|
612 | * query(':leave', [
|
613 | * animate('0.5s ease-out', style({ left: '-100%' }))
|
614 | * ])
|
615 | * ]))
|
616 | * ```
|
617 | *
|
618 | * ### State-change functions
|
619 | *
|
620 | * Here is an example of a `fromState` specified as a state-change function that invokes an
|
621 | * animation when true:
|
622 | *
|
623 | * ```typescript
|
624 | * transition((fromState, toState) =>
|
625 | * {
|
626 | * return fromState == "off" && toState == "on";
|
627 | * },
|
628 | * animate("1s 0s"))
|
629 | * ```
|
630 | *
|
631 | * ### Animating to the final state
|
632 | *
|
633 | * If the final step in a transition is a call to `animate()` that uses a timing value
|
634 | * with no style data, that step is automatically considered the final animation arc,
|
635 | * for the element to reach the final state. Angular automatically adds or removes
|
636 | * CSS styles to ensure that the element is in the correct final state.
|
637 | *
|
638 | * The following example defines a transition that starts by hiding the element,
|
639 | * then makes sure that it animates properly to whatever state is currently active for trigger:
|
640 | *
|
641 | * ```typescript
|
642 | * transition("void => *", [
|
643 | * style({ opacity: 0 }),
|
644 | * animate(500)
|
645 | * ])
|
646 | * ```
|
647 | * ### Boolean value matching
|
648 | * If a trigger binding value is a Boolean, it can be matched using a transition expression
|
649 | * that compares true and false or 1 and 0. For example:
|
650 | *
|
651 | * ```
|
652 | * // in the template
|
653 | * <div [@openClose]="open ? true : false">...</div>
|
654 | * // in the component metadata
|
655 | * trigger('openClose', [
|
656 | * state('true', style({ height: '*' })),
|
657 | * state('false', style({ height: '0px' })),
|
658 | * transition('false <=> true', animate(500))
|
659 | * ])
|
660 | * ```
|
661 | *
|
662 | * @publicApi
|
663 | **/
|
664 | function transition(stateChangeExpr, steps, options) {
|
665 | if (options === void 0) { options = null; }
|
666 | return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options: options };
|
667 | }
|
668 | /**
|
669 | * Produces a reusable animation that can be invoked in another animation or sequence,
|
670 | * by calling the `useAnimation()` function.
|
671 | *
|
672 | * @param steps One or more animation objects, as returned by the `animate()`
|
673 | * or `sequence()` function, that form a transformation from one state to another.
|
674 | * A sequence is used by default when you pass an array.
|
675 | * @param options An options object that can contain a delay value for the start of the
|
676 | * animation, and additional developer-defined parameters.
|
677 | * Provided values for additional parameters are used as defaults,
|
678 | * and override values can be passed to the caller on invocation.
|
679 | * @returns An object that encapsulates the animation data.
|
680 | *
|
681 | * @usageNotes
|
682 | * The following example defines a reusable animation, providing some default parameter
|
683 | * values.
|
684 | *
|
685 | * ```typescript
|
686 | * var fadeAnimation = animation([
|
687 | * style({ opacity: '{{ start }}' }),
|
688 | * animate('{{ time }}',
|
689 | * style({ opacity: '{{ end }}'}))
|
690 | * ],
|
691 | * { params: { time: '1000ms', start: 0, end: 1 }});
|
692 | * ```
|
693 | *
|
694 | * The following invokes the defined animation with a call to `useAnimation()`,
|
695 | * passing in override parameter values.
|
696 | *
|
697 | * ```js
|
698 | * useAnimation(fadeAnimation, {
|
699 | * params: {
|
700 | * time: '2s',
|
701 | * start: 1,
|
702 | * end: 0
|
703 | * }
|
704 | * })
|
705 | * ```
|
706 | *
|
707 | * If any of the passed-in parameter values are missing from this call,
|
708 | * the default values are used. If one or more parameter values are missing before a step is
|
709 | * animated, `useAnimation()` throws an error.
|
710 | *
|
711 | * @publicApi
|
712 | */
|
713 | function animation(steps, options) {
|
714 | if (options === void 0) { options = null; }
|
715 | return { type: 8 /* Reference */, animation: steps, options: options };
|
716 | }
|
717 | /**
|
718 | * Executes a queried inner animation element within an animation sequence.
|
719 | *
|
720 | * @param options An options object that can contain a delay value for the start of the
|
721 | * animation, and additional override values for developer-defined parameters.
|
722 | * @return An object that encapsulates the child animation data.
|
723 | *
|
724 | * @usageNotes
|
725 | * Each time an animation is triggered in Angular, the parent animation
|
726 | * has priority and any child animations are blocked. In order
|
727 | * for a child animation to run, the parent animation must query each of the elements
|
728 | * containing child animations, and run them using this function.
|
729 | *
|
730 | * Note that this feature is designed to be used with `query()` and it will only work
|
731 | * with animations that are assigned using the Angular animation library. CSS keyframes
|
732 | * and transitions are not handled by this API.
|
733 | *
|
734 | * @publicApi
|
735 | */
|
736 | function animateChild(options) {
|
737 | if (options === void 0) { options = null; }
|
738 | return { type: 9 /* AnimateChild */, options: options };
|
739 | }
|
740 | /**
|
741 | * Starts a reusable animation that is created using the `animation()` function.
|
742 | *
|
743 | * @param animation The reusable animation to start.
|
744 | * @param options An options object that can contain a delay value for the start of
|
745 | * the animation, and additional override values for developer-defined parameters.
|
746 | * @return An object that contains the animation parameters.
|
747 | *
|
748 | * @publicApi
|
749 | */
|
750 | function useAnimation(animation, options) {
|
751 | if (options === void 0) { options = null; }
|
752 | return { type: 10 /* AnimateRef */, animation: animation, options: options };
|
753 | }
|
754 | /**
|
755 | * Finds one or more inner elements within the current element that is
|
756 | * being animated within a sequence. Use with `animate()`.
|
757 | *
|
758 | * @param selector The element to query, or a set of elements that contain Angular-specific
|
759 | * characteristics, specified with one or more of the following tokens.
|
760 | * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements.
|
761 | * - `query(":animating")` : Query all currently animating elements.
|
762 | * - `query("@triggerName")` : Query elements that contain an animation trigger.
|
763 | * - `query("@*")` : Query all elements that contain an animation triggers.
|
764 | * - `query(":self")` : Include the current element into the animation sequence.
|
765 | *
|
766 | * @param animation One or more animation steps to apply to the queried element or elements.
|
767 | * An array is treated as an animation sequence.
|
768 | * @param options An options object. Use the 'limit' field to limit the total number of
|
769 | * items to collect.
|
770 | * @return An object that encapsulates the query data.
|
771 | *
|
772 | * @usageNotes
|
773 | * Tokens can be merged into a combined query selector string. For example:
|
774 | *
|
775 | * ```typescript
|
776 | * query(':self, .record:enter, .record:leave, @subTrigger', [...])
|
777 | * ```
|
778 | *
|
779 | * The `query()` function collects multiple elements and works internally by using
|
780 | * `element.querySelectorAll`. Use the `limit` field of an options object to limit
|
781 | * the total number of items to be collected. For example:
|
782 | *
|
783 | * ```js
|
784 | * query('div', [
|
785 | * animate(...),
|
786 | * animate(...)
|
787 | * ], { limit: 1 })
|
788 | * ```
|
789 | *
|
790 | * By default, throws an error when zero items are found. Set the
|
791 | * `optional` flag to ignore this error. For example:
|
792 | *
|
793 | * ```js
|
794 | * query('.some-element-that-may-not-be-there', [
|
795 | * animate(...),
|
796 | * animate(...)
|
797 | * ], { optional: true })
|
798 | * ```
|
799 | *
|
800 | * ### Usage Example
|
801 | *
|
802 | * The following example queries for inner elements and animates them
|
803 | * individually using `animate()`.
|
804 | *
|
805 | * ```typescript
|
806 | * @Component({
|
807 | * selector: 'inner',
|
808 | * template: `
|
809 | * <div [@queryAnimation]="exp">
|
810 | * <h1>Title</h1>
|
811 | * <div class="content">
|
812 | * Blah blah blah
|
813 | * </div>
|
814 | * </div>
|
815 | * `,
|
816 | * animations: [
|
817 | * trigger('queryAnimation', [
|
818 | * transition('* => goAnimate', [
|
819 | * // hide the inner elements
|
820 | * query('h1', style({ opacity: 0 })),
|
821 | * query('.content', style({ opacity: 0 })),
|
822 | *
|
823 | * // animate the inner elements in, one by one
|
824 | * query('h1', animate(1000, style({ opacity: 1 }))),
|
825 | * query('.content', animate(1000, style({ opacity: 1 }))),
|
826 | * ])
|
827 | * ])
|
828 | * ]
|
829 | * })
|
830 | * class Cmp {
|
831 | * exp = '';
|
832 | *
|
833 | * goAnimate() {
|
834 | * this.exp = 'goAnimate';
|
835 | * }
|
836 | * }
|
837 | * ```
|
838 | *
|
839 | * @publicApi
|
840 | */
|
841 | function query(selector, animation, options) {
|
842 | if (options === void 0) { options = null; }
|
843 | return { type: 11 /* Query */, selector: selector, animation: animation, options: options };
|
844 | }
|
845 | /**
|
846 | * Use within an animation `query()` call to issue a timing gap after
|
847 | * each queried item is animated.
|
848 | *
|
849 | * @param timings A delay value.
|
850 | * @param animation One ore more animation steps.
|
851 | * @returns An object that encapsulates the stagger data.
|
852 | *
|
853 | * @usageNotes
|
854 | * In the following example, a container element wraps a list of items stamped out
|
855 | * by an `ngFor`. The container element contains an animation trigger that will later be set
|
856 | * to query for each of the inner items.
|
857 | *
|
858 | * Each time items are added, the opacity fade-in animation runs,
|
859 | * and each removed item is faded out.
|
860 | * When either of these animations occur, the stagger effect is
|
861 | * applied after each item's animation is started.
|
862 | *
|
863 | * ```html
|
864 | * <!-- list.component.html -->
|
865 | * <button (click)="toggle()">Show / Hide Items</button>
|
866 | * <hr />
|
867 | * <div [@listAnimation]="items.length">
|
868 | * <div *ngFor="let item of items">
|
869 | * {{ item }}
|
870 | * </div>
|
871 | * </div>
|
872 | * ```
|
873 | *
|
874 | * Here is the component code:
|
875 | *
|
876 | * ```typescript
|
877 | * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
|
878 | * @Component({
|
879 | * templateUrl: 'list.component.html',
|
880 | * animations: [
|
881 | * trigger('listAnimation', [
|
882 | * ...
|
883 | * ])
|
884 | * ]
|
885 | * })
|
886 | * class ListComponent {
|
887 | * items = [];
|
888 | *
|
889 | * showItems() {
|
890 | * this.items = [0,1,2,3,4];
|
891 | * }
|
892 | *
|
893 | * hideItems() {
|
894 | * this.items = [];
|
895 | * }
|
896 | *
|
897 | * toggle() {
|
898 | * this.items.length ? this.hideItems() : this.showItems();
|
899 | * }
|
900 | * }
|
901 | * ```
|
902 | *
|
903 | * Here is the animation trigger code:
|
904 | *
|
905 | * ```typescript
|
906 | * trigger('listAnimation', [
|
907 | * transition('* => *', [ // each time the binding value changes
|
908 | * query(':leave', [
|
909 | * stagger(100, [
|
910 | * animate('0.5s', style({ opacity: 0 }))
|
911 | * ])
|
912 | * ]),
|
913 | * query(':enter', [
|
914 | * style({ opacity: 0 }),
|
915 | * stagger(100, [
|
916 | * animate('0.5s', style({ opacity: 1 }))
|
917 | * ])
|
918 | * ])
|
919 | * ])
|
920 | * ])
|
921 | * ```
|
922 | *
|
923 | * @publicApi
|
924 | */
|
925 | function stagger(timings, animation) {
|
926 | return { type: 12 /* Stagger */, timings: timings, animation: animation };
|
927 | }
|
928 |
|
929 | /**
|
930 | * @license
|
931 | * Copyright Google Inc. All Rights Reserved.
|
932 | *
|
933 | * Use of this source code is governed by an MIT-style license that can be
|
934 | * found in the LICENSE file at https://angular.io/license
|
935 | */
|
936 | function scheduleMicroTask(cb) {
|
937 | Promise.resolve(null).then(cb);
|
938 | }
|
939 |
|
940 | /**
|
941 | * @license
|
942 | * Copyright Google Inc. All Rights Reserved.
|
943 | *
|
944 | * Use of this source code is governed by an MIT-style license that can be
|
945 | * found in the LICENSE file at https://angular.io/license
|
946 | */
|
947 | /**
|
948 | * An empty programmatic controller for reusable animations.
|
949 | * Used internally when animations are disabled, to avoid
|
950 | * checking for the null case when an animation player is expected.
|
951 | *
|
952 | * @see `animate()`
|
953 | * @see `AnimationPlayer`
|
954 | * @see `GroupPlayer`
|
955 | *
|
956 | * @publicApi
|
957 | */
|
958 | var NoopAnimationPlayer = /** @class */ (function () {
|
959 | function NoopAnimationPlayer(duration, delay) {
|
960 | if (duration === void 0) { duration = 0; }
|
961 | if (delay === void 0) { delay = 0; }
|
962 | this._onDoneFns = [];
|
963 | this._onStartFns = [];
|
964 | this._onDestroyFns = [];
|
965 | this._started = false;
|
966 | this._destroyed = false;
|
967 | this._finished = false;
|
968 | this.parentPlayer = null;
|
969 | this.totalTime = duration + delay;
|
970 | }
|
971 | NoopAnimationPlayer.prototype._onFinish = function () {
|
972 | if (!this._finished) {
|
973 | this._finished = true;
|
974 | this._onDoneFns.forEach(function (fn) { return fn(); });
|
975 | this._onDoneFns = [];
|
976 | }
|
977 | };
|
978 | NoopAnimationPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); };
|
979 | NoopAnimationPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); };
|
980 | NoopAnimationPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); };
|
981 | NoopAnimationPlayer.prototype.hasStarted = function () { return this._started; };
|
982 | NoopAnimationPlayer.prototype.init = function () { };
|
983 | NoopAnimationPlayer.prototype.play = function () {
|
984 | if (!this.hasStarted()) {
|
985 | this._onStart();
|
986 | this.triggerMicrotask();
|
987 | }
|
988 | this._started = true;
|
989 | };
|
990 | /** @internal */
|
991 | NoopAnimationPlayer.prototype.triggerMicrotask = function () {
|
992 | var _this = this;
|
993 | scheduleMicroTask(function () { return _this._onFinish(); });
|
994 | };
|
995 | NoopAnimationPlayer.prototype._onStart = function () {
|
996 | this._onStartFns.forEach(function (fn) { return fn(); });
|
997 | this._onStartFns = [];
|
998 | };
|
999 | NoopAnimationPlayer.prototype.pause = function () { };
|
1000 | NoopAnimationPlayer.prototype.restart = function () { };
|
1001 | NoopAnimationPlayer.prototype.finish = function () { this._onFinish(); };
|
1002 | NoopAnimationPlayer.prototype.destroy = function () {
|
1003 | if (!this._destroyed) {
|
1004 | this._destroyed = true;
|
1005 | if (!this.hasStarted()) {
|
1006 | this._onStart();
|
1007 | }
|
1008 | this.finish();
|
1009 | this._onDestroyFns.forEach(function (fn) { return fn(); });
|
1010 | this._onDestroyFns = [];
|
1011 | }
|
1012 | };
|
1013 | NoopAnimationPlayer.prototype.reset = function () { };
|
1014 | NoopAnimationPlayer.prototype.setPosition = function (position) { };
|
1015 | NoopAnimationPlayer.prototype.getPosition = function () { return 0; };
|
1016 | /** @internal */
|
1017 | NoopAnimationPlayer.prototype.triggerCallback = function (phaseName) {
|
1018 | var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
|
1019 | methods.forEach(function (fn) { return fn(); });
|
1020 | methods.length = 0;
|
1021 | };
|
1022 | return NoopAnimationPlayer;
|
1023 | }());
|
1024 |
|
1025 | /**
|
1026 | * @license
|
1027 | * Copyright Google Inc. All Rights Reserved.
|
1028 | *
|
1029 | * Use of this source code is governed by an MIT-style license that can be
|
1030 | * found in the LICENSE file at https://angular.io/license
|
1031 | */
|
1032 | /**
|
1033 | * A programmatic controller for a group of reusable animations.
|
1034 | * Used internally to control animations.
|
1035 | *
|
1036 | * @see `AnimationPlayer`
|
1037 | * @see `{@link animations/group group()}`
|
1038 | *
|
1039 | */
|
1040 | var AnimationGroupPlayer = /** @class */ (function () {
|
1041 | function AnimationGroupPlayer(_players) {
|
1042 | var _this = this;
|
1043 | this._onDoneFns = [];
|
1044 | this._onStartFns = [];
|
1045 | this._finished = false;
|
1046 | this._started = false;
|
1047 | this._destroyed = false;
|
1048 | this._onDestroyFns = [];
|
1049 | this.parentPlayer = null;
|
1050 | this.totalTime = 0;
|
1051 | this.players = _players;
|
1052 | var doneCount = 0;
|
1053 | var destroyCount = 0;
|
1054 | var startCount = 0;
|
1055 | var total = this.players.length;
|
1056 | if (total == 0) {
|
1057 | scheduleMicroTask(function () { return _this._onFinish(); });
|
1058 | }
|
1059 | else {
|
1060 | this.players.forEach(function (player) {
|
1061 | player.onDone(function () {
|
1062 | if (++doneCount == total) {
|
1063 | _this._onFinish();
|
1064 | }
|
1065 | });
|
1066 | player.onDestroy(function () {
|
1067 | if (++destroyCount == total) {
|
1068 | _this._onDestroy();
|
1069 | }
|
1070 | });
|
1071 | player.onStart(function () {
|
1072 | if (++startCount == total) {
|
1073 | _this._onStart();
|
1074 | }
|
1075 | });
|
1076 | });
|
1077 | }
|
1078 | this.totalTime = this.players.reduce(function (time, player) { return Math.max(time, player.totalTime); }, 0);
|
1079 | }
|
1080 | AnimationGroupPlayer.prototype._onFinish = function () {
|
1081 | if (!this._finished) {
|
1082 | this._finished = true;
|
1083 | this._onDoneFns.forEach(function (fn) { return fn(); });
|
1084 | this._onDoneFns = [];
|
1085 | }
|
1086 | };
|
1087 | AnimationGroupPlayer.prototype.init = function () { this.players.forEach(function (player) { return player.init(); }); };
|
1088 | AnimationGroupPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); };
|
1089 | AnimationGroupPlayer.prototype._onStart = function () {
|
1090 | if (!this.hasStarted()) {
|
1091 | this._started = true;
|
1092 | this._onStartFns.forEach(function (fn) { return fn(); });
|
1093 | this._onStartFns = [];
|
1094 | }
|
1095 | };
|
1096 | AnimationGroupPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); };
|
1097 | AnimationGroupPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); };
|
1098 | AnimationGroupPlayer.prototype.hasStarted = function () { return this._started; };
|
1099 | AnimationGroupPlayer.prototype.play = function () {
|
1100 | if (!this.parentPlayer) {
|
1101 | this.init();
|
1102 | }
|
1103 | this._onStart();
|
1104 | this.players.forEach(function (player) { return player.play(); });
|
1105 | };
|
1106 | AnimationGroupPlayer.prototype.pause = function () { this.players.forEach(function (player) { return player.pause(); }); };
|
1107 | AnimationGroupPlayer.prototype.restart = function () { this.players.forEach(function (player) { return player.restart(); }); };
|
1108 | AnimationGroupPlayer.prototype.finish = function () {
|
1109 | this._onFinish();
|
1110 | this.players.forEach(function (player) { return player.finish(); });
|
1111 | };
|
1112 | AnimationGroupPlayer.prototype.destroy = function () { this._onDestroy(); };
|
1113 | AnimationGroupPlayer.prototype._onDestroy = function () {
|
1114 | if (!this._destroyed) {
|
1115 | this._destroyed = true;
|
1116 | this._onFinish();
|
1117 | this.players.forEach(function (player) { return player.destroy(); });
|
1118 | this._onDestroyFns.forEach(function (fn) { return fn(); });
|
1119 | this._onDestroyFns = [];
|
1120 | }
|
1121 | };
|
1122 | AnimationGroupPlayer.prototype.reset = function () {
|
1123 | this.players.forEach(function (player) { return player.reset(); });
|
1124 | this._destroyed = false;
|
1125 | this._finished = false;
|
1126 | this._started = false;
|
1127 | };
|
1128 | AnimationGroupPlayer.prototype.setPosition = function (p) {
|
1129 | var timeAtPosition = p * this.totalTime;
|
1130 | this.players.forEach(function (player) {
|
1131 | var position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
|
1132 | player.setPosition(position);
|
1133 | });
|
1134 | };
|
1135 | AnimationGroupPlayer.prototype.getPosition = function () {
|
1136 | var min = 0;
|
1137 | this.players.forEach(function (player) {
|
1138 | var p = player.getPosition();
|
1139 | min = Math.min(p, min);
|
1140 | });
|
1141 | return min;
|
1142 | };
|
1143 | AnimationGroupPlayer.prototype.beforeDestroy = function () {
|
1144 | this.players.forEach(function (player) {
|
1145 | if (player.beforeDestroy) {
|
1146 | player.beforeDestroy();
|
1147 | }
|
1148 | });
|
1149 | };
|
1150 | /** @internal */
|
1151 | AnimationGroupPlayer.prototype.triggerCallback = function (phaseName) {
|
1152 | var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
|
1153 | methods.forEach(function (fn) { return fn(); });
|
1154 | methods.length = 0;
|
1155 | };
|
1156 | return AnimationGroupPlayer;
|
1157 | }());
|
1158 |
|
1159 | /**
|
1160 | * @license
|
1161 | * Copyright Google Inc. All Rights Reserved.
|
1162 | *
|
1163 | * Use of this source code is governed by an MIT-style license that can be
|
1164 | * found in the LICENSE file at https://angular.io/license
|
1165 | */
|
1166 | var ɵPRE_STYLE = '!';
|
1167 |
|
1168 | /**
|
1169 | * @license
|
1170 | * Copyright Google Inc. All Rights Reserved.
|
1171 | *
|
1172 | * Use of this source code is governed by an MIT-style license that can be
|
1173 | * found in the LICENSE file at https://angular.io/license
|
1174 | */
|
1175 |
|
1176 | /**
|
1177 | * @license
|
1178 | * Copyright Google Inc. All Rights Reserved.
|
1179 | *
|
1180 | * Use of this source code is governed by an MIT-style license that can be
|
1181 | * found in the LICENSE file at https://angular.io/license
|
1182 | */
|
1183 |
|
1184 | /**
|
1185 | * @license
|
1186 | * Copyright Google Inc. All Rights Reserved.
|
1187 | *
|
1188 | * Use of this source code is governed by an MIT-style license that can be
|
1189 | * found in the LICENSE file at https://angular.io/license
|
1190 | */
|
1191 |
|
1192 | /**
|
1193 | * Generated bundle index. Do not edit.
|
1194 | */
|
1195 |
|
1196 | exports.AnimationBuilder = AnimationBuilder;
|
1197 | exports.AnimationFactory = AnimationFactory;
|
1198 | exports.AUTO_STYLE = AUTO_STYLE;
|
1199 | exports.animate = animate;
|
1200 | exports.animateChild = animateChild;
|
1201 | exports.animation = animation;
|
1202 | exports.group = group;
|
1203 | exports.keyframes = keyframes;
|
1204 | exports.query = query;
|
1205 | exports.sequence = sequence;
|
1206 | exports.stagger = stagger;
|
1207 | exports.state = state;
|
1208 | exports.style = style;
|
1209 | exports.transition = transition;
|
1210 | exports.trigger = trigger;
|
1211 | exports.useAnimation = useAnimation;
|
1212 | exports.NoopAnimationPlayer = NoopAnimationPlayer;
|
1213 | exports.ɵPRE_STYLE = ɵPRE_STYLE;
|
1214 | exports.ɵAnimationGroupPlayer = AnimationGroupPlayer;
|
1215 |
|
1216 | Object.defineProperty(exports, '__esModule', { value: true });
|
1217 |
|
1218 | }));
|
1219 | //# sourceMappingURL=animations.umd.js.map
|