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