1 | /**
|
---|
2 | * @license Angular v12.2.13
|
---|
3 | * (c) 2010-2021 Google LLC. https://angular.io/
|
---|
4 | * License: MIT
|
---|
5 | */
|
---|
6 |
|
---|
7 | /**
|
---|
8 | * Defines an animation step that combines styling information with timing information.
|
---|
9 | *
|
---|
10 | * @param timings Sets `AnimateTimings` for the parent animation.
|
---|
11 | * A string in the format "duration [delay] [easing]".
|
---|
12 | * - Duration and delay are expressed as a number and optional time unit,
|
---|
13 | * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
|
---|
14 | * The default unit is milliseconds.
|
---|
15 | * - The easing value controls how the animation accelerates and decelerates
|
---|
16 | * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,
|
---|
17 | * `ease-in-out`, or a `cubic-bezier()` function call.
|
---|
18 | * If not supplied, no easing is applied.
|
---|
19 | *
|
---|
20 | * For example, the string "1s 100ms ease-out" specifies a duration of
|
---|
21 | * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
|
---|
22 | * which decelerates near the end of the duration.
|
---|
23 | * @param styles Sets AnimationStyles for the parent animation.
|
---|
24 | * A function call to either `style()` or `keyframes()`
|
---|
25 | * that returns a collection of CSS style entries to be applied to the parent animation.
|
---|
26 | * When null, uses the styles from the destination state.
|
---|
27 | * This is useful when describing an animation step that will complete an animation;
|
---|
28 | * see "Animating to the final state" in `transitions()`.
|
---|
29 | * @returns An object that encapsulates the animation step.
|
---|
30 | *
|
---|
31 | * @usageNotes
|
---|
32 | * Call within an animation `sequence()`, `{@link animations/group group()}`, or
|
---|
33 | * `transition()` call to specify an animation step
|
---|
34 | * that applies given style data to the parent animation for a given amount of time.
|
---|
35 | *
|
---|
36 | * ### Syntax Examples
|
---|
37 | * **Timing examples**
|
---|
38 | *
|
---|
39 | * The following examples show various `timings` specifications.
|
---|
40 | * - `animate(500)` : Duration is 500 milliseconds.
|
---|
41 | * - `animate("1s")` : Duration is 1000 milliseconds.
|
---|
42 | * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
|
---|
43 | * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
|
---|
44 | * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
|
---|
45 | * milliseconds, easing according to a bezier curve.
|
---|
46 | *
|
---|
47 | * **Style examples**
|
---|
48 | *
|
---|
49 | * The following example calls `style()` to set a single CSS style.
|
---|
50 | * ```typescript
|
---|
51 | * animate(500, style({ background: "red" }))
|
---|
52 | * ```
|
---|
53 | * The following example calls `keyframes()` to set a CSS style
|
---|
54 | * to different values for successive keyframes.
|
---|
55 | * ```typescript
|
---|
56 | * animate(500, keyframes(
|
---|
57 | * [
|
---|
58 | * style({ background: "blue" }),
|
---|
59 | * style({ background: "red" })
|
---|
60 | * ])
|
---|
61 | * ```
|
---|
62 | *
|
---|
63 | * @publicApi
|
---|
64 | */
|
---|
65 | export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
|
---|
66 |
|
---|
67 | /**
|
---|
68 | * Executes a queried inner animation element within an animation sequence.
|
---|
69 | *
|
---|
70 | * @param options An options object that can contain a delay value for the start of the
|
---|
71 | * animation, and additional override values for developer-defined parameters.
|
---|
72 | * @return An object that encapsulates the child animation data.
|
---|
73 | *
|
---|
74 | * @usageNotes
|
---|
75 | * Each time an animation is triggered in Angular, the parent animation
|
---|
76 | * has priority and any child animations are blocked. In order
|
---|
77 | * for a child animation to run, the parent animation must query each of the elements
|
---|
78 | * containing child animations, and run them using this function.
|
---|
79 | *
|
---|
80 | * Note that this feature is designed to be used with `query()` and it will only work
|
---|
81 | * with animations that are assigned using the Angular animation library. CSS keyframes
|
---|
82 | * and transitions are not handled by this API.
|
---|
83 | *
|
---|
84 | * @publicApi
|
---|
85 | */
|
---|
86 | export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
|
---|
87 |
|
---|
88 | /**
|
---|
89 | * Adds duration options to control animation styling and timing for a child animation.
|
---|
90 | *
|
---|
91 | * @see `animateChild()`
|
---|
92 | *
|
---|
93 | * @publicApi
|
---|
94 | */
|
---|
95 | export declare interface AnimateChildOptions extends AnimationOptions {
|
---|
96 | duration?: number | string;
|
---|
97 | }
|
---|
98 |
|
---|
99 | /**
|
---|
100 | * Represents animation-step timing parameters for an animation step.
|
---|
101 | * @see `animate()`
|
---|
102 | *
|
---|
103 | * @publicApi
|
---|
104 | */
|
---|
105 | export declare type AnimateTimings = {
|
---|
106 | /**
|
---|
107 | * The full duration of an animation step. A number and optional time unit,
|
---|
108 | * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
|
---|
109 | * The default unit is milliseconds.
|
---|
110 | */
|
---|
111 | duration: number;
|
---|
112 | /**
|
---|
113 | * The delay in applying an animation step. A number and optional time unit.
|
---|
114 | * The default unit is milliseconds.
|
---|
115 | */
|
---|
116 | delay: number;
|
---|
117 | /**
|
---|
118 | * An easing style that controls how an animations step accelerates
|
---|
119 | * and decelerates during its run time. An easing function such as `cubic-bezier()`,
|
---|
120 | * or one of the following constants:
|
---|
121 | * - `ease-in`
|
---|
122 | * - `ease-out`
|
---|
123 | * - `ease-in-and-out`
|
---|
124 | */
|
---|
125 | easing: string | null;
|
---|
126 | };
|
---|
127 |
|
---|
128 | /**
|
---|
129 | * Produces a reusable animation that can be invoked in another animation or sequence,
|
---|
130 | * by calling the `useAnimation()` function.
|
---|
131 | *
|
---|
132 | * @param steps One or more animation objects, as returned by the `animate()`
|
---|
133 | * or `sequence()` function, that form a transformation from one state to another.
|
---|
134 | * A sequence is used by default when you pass an array.
|
---|
135 | * @param options An options object that can contain a delay value for the start of the
|
---|
136 | * animation, and additional developer-defined parameters.
|
---|
137 | * Provided values for additional parameters are used as defaults,
|
---|
138 | * and override values can be passed to the caller on invocation.
|
---|
139 | * @returns An object that encapsulates the animation data.
|
---|
140 | *
|
---|
141 | * @usageNotes
|
---|
142 | * The following example defines a reusable animation, providing some default parameter
|
---|
143 | * values.
|
---|
144 | *
|
---|
145 | * ```typescript
|
---|
146 | * var fadeAnimation = animation([
|
---|
147 | * style({ opacity: '{{ start }}' }),
|
---|
148 | * animate('{{ time }}',
|
---|
149 | * style({ opacity: '{{ end }}'}))
|
---|
150 | * ],
|
---|
151 | * { params: { time: '1000ms', start: 0, end: 1 }});
|
---|
152 | * ```
|
---|
153 | *
|
---|
154 | * The following invokes the defined animation with a call to `useAnimation()`,
|
---|
155 | * passing in override parameter values.
|
---|
156 | *
|
---|
157 | * ```js
|
---|
158 | * useAnimation(fadeAnimation, {
|
---|
159 | * params: {
|
---|
160 | * time: '2s',
|
---|
161 | * start: 1,
|
---|
162 | * end: 0
|
---|
163 | * }
|
---|
164 | * })
|
---|
165 | * ```
|
---|
166 | *
|
---|
167 | * If any of the passed-in parameter values are missing from this call,
|
---|
168 | * the default values are used. If one or more parameter values are missing before a step is
|
---|
169 | * animated, `useAnimation()` throws an error.
|
---|
170 | *
|
---|
171 | * @publicApi
|
---|
172 | */
|
---|
173 | export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
|
---|
174 |
|
---|
175 | /**
|
---|
176 | * Encapsulates a child animation, that can be run explicitly when the parent is run.
|
---|
177 | * Instantiated and returned by the `animateChild` function.
|
---|
178 | *
|
---|
179 | * @publicApi
|
---|
180 | */
|
---|
181 | export declare interface AnimationAnimateChildMetadata extends AnimationMetadata {
|
---|
182 | /**
|
---|
183 | * An options object containing a delay and
|
---|
184 | * developer-defined parameters that provide styling defaults and
|
---|
185 | * can be overridden on invocation. Default delay is 0.
|
---|
186 | */
|
---|
187 | options: AnimationOptions | null;
|
---|
188 | }
|
---|
189 |
|
---|
190 | /**
|
---|
191 | * Encapsulates an animation step. Instantiated and returned by
|
---|
192 | * the `animate()` function.
|
---|
193 | *
|
---|
194 | * @publicApi
|
---|
195 | */
|
---|
196 | export declare interface AnimationAnimateMetadata extends AnimationMetadata {
|
---|
197 | /**
|
---|
198 | * The timing data for the step.
|
---|
199 | */
|
---|
200 | timings: string | number | AnimateTimings;
|
---|
201 | /**
|
---|
202 | * A set of styles used in the step.
|
---|
203 | */
|
---|
204 | styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
|
---|
205 | }
|
---|
206 |
|
---|
207 | /**
|
---|
208 | * Encapsulates a reusable animation.
|
---|
209 | * Instantiated and returned by the `useAnimation()` function.
|
---|
210 | *
|
---|
211 | * @publicApi
|
---|
212 | */
|
---|
213 | export declare interface AnimationAnimateRefMetadata extends AnimationMetadata {
|
---|
214 | /**
|
---|
215 | * An animation reference object.
|
---|
216 | */
|
---|
217 | animation: AnimationReferenceMetadata;
|
---|
218 | /**
|
---|
219 | * An options object containing a delay and
|
---|
220 | * developer-defined parameters that provide styling defaults and
|
---|
221 | * can be overridden on invocation. Default delay is 0.
|
---|
222 | */
|
---|
223 | options: AnimationOptions | null;
|
---|
224 | }
|
---|
225 |
|
---|
226 | /**
|
---|
227 | * An injectable service that produces an animation sequence programmatically within an
|
---|
228 | * Angular component or directive.
|
---|
229 | * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
|
---|
230 | *
|
---|
231 | * @usageNotes
|
---|
232 | *
|
---|
233 | * To use this service, add it to your component or directive as a dependency.
|
---|
234 | * The service is instantiated along with your component.
|
---|
235 | *
|
---|
236 | * Apps do not typically need to create their own animation players, but if you
|
---|
237 | * do need to, follow these steps:
|
---|
238 | *
|
---|
239 | * 1. Use the `build()` method to create a programmatic animation using the
|
---|
240 | * `animate()` function. The method returns an `AnimationFactory` instance.
|
---|
241 | *
|
---|
242 | * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
|
---|
243 | *
|
---|
244 | * 3. Use the player object to control the animation programmatically.
|
---|
245 | *
|
---|
246 | * For example:
|
---|
247 | *
|
---|
248 | * ```ts
|
---|
249 | * // import the service from BrowserAnimationsModule
|
---|
250 | * import {AnimationBuilder} from '@angular/animations';
|
---|
251 | * // require the service as a dependency
|
---|
252 | * class MyCmp {
|
---|
253 | * constructor(private _builder: AnimationBuilder) {}
|
---|
254 | *
|
---|
255 | * makeAnimation(element: any) {
|
---|
256 | * // first define a reusable animation
|
---|
257 | * const myAnimation = this._builder.build([
|
---|
258 | * style({ width: 0 }),
|
---|
259 | * animate(1000, style({ width: '100px' }))
|
---|
260 | * ]);
|
---|
261 | *
|
---|
262 | * // use the returned factory object to create a player
|
---|
263 | * const player = myAnimation.create(element);
|
---|
264 | *
|
---|
265 | * player.play();
|
---|
266 | * }
|
---|
267 | * }
|
---|
268 | * ```
|
---|
269 | *
|
---|
270 | * @publicApi
|
---|
271 | */
|
---|
272 | export declare abstract class AnimationBuilder {
|
---|
273 | /**
|
---|
274 | * Builds a factory for producing a defined animation.
|
---|
275 | * @param animation A reusable animation definition.
|
---|
276 | * @returns A factory object that can create a player for the defined animation.
|
---|
277 | * @see `animate()`
|
---|
278 | */
|
---|
279 | abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
|
---|
280 | }
|
---|
281 |
|
---|
282 |
|
---|
283 | /**
|
---|
284 | * An instance of this class is returned as an event parameter when an animation
|
---|
285 | * callback is captured for an animation either during the start or done phase.
|
---|
286 | *
|
---|
287 | * ```typescript
|
---|
288 | * @Component({
|
---|
289 | * host: {
|
---|
290 | * '[@myAnimationTrigger]': 'someExpression',
|
---|
291 | * '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
|
---|
292 | * '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
|
---|
293 | * },
|
---|
294 | * animations: [
|
---|
295 | * trigger("myAnimationTrigger", [
|
---|
296 | * // ...
|
---|
297 | * ])
|
---|
298 | * ]
|
---|
299 | * })
|
---|
300 | * class MyComponent {
|
---|
301 | * someExpression: any = false;
|
---|
302 | * captureStartEvent(event: AnimationEvent) {
|
---|
303 | * // the toState, fromState and totalTime data is accessible from the event variable
|
---|
304 | * }
|
---|
305 | *
|
---|
306 | * captureDoneEvent(event: AnimationEvent) {
|
---|
307 | * // the toState, fromState and totalTime data is accessible from the event variable
|
---|
308 | * }
|
---|
309 | * }
|
---|
310 | * ```
|
---|
311 | *
|
---|
312 | * @publicApi
|
---|
313 | */
|
---|
314 | declare interface AnimationEvent_2 {
|
---|
315 | /**
|
---|
316 | * The name of the state from which the animation is triggered.
|
---|
317 | */
|
---|
318 | fromState: string;
|
---|
319 | /**
|
---|
320 | * The name of the state in which the animation completes.
|
---|
321 | */
|
---|
322 | toState: string;
|
---|
323 | /**
|
---|
324 | * The time it takes the animation to complete, in milliseconds.
|
---|
325 | */
|
---|
326 | totalTime: number;
|
---|
327 | /**
|
---|
328 | * The animation phase in which the callback was invoked, one of
|
---|
329 | * "start" or "done".
|
---|
330 | */
|
---|
331 | phaseName: string;
|
---|
332 | /**
|
---|
333 | * The element to which the animation is attached.
|
---|
334 | */
|
---|
335 | element: any;
|
---|
336 | /**
|
---|
337 | * Internal.
|
---|
338 | */
|
---|
339 | triggerName: string;
|
---|
340 | /**
|
---|
341 | * Internal.
|
---|
342 | */
|
---|
343 | disabled: boolean;
|
---|
344 | }
|
---|
345 | export { AnimationEvent_2 as AnimationEvent }
|
---|
346 |
|
---|
347 | /**
|
---|
348 | * A factory object returned from the `AnimationBuilder`.`build()` method.
|
---|
349 | *
|
---|
350 | * @publicApi
|
---|
351 | */
|
---|
352 | export declare abstract class AnimationFactory {
|
---|
353 | /**
|
---|
354 | * Creates an `AnimationPlayer` instance for the reusable animation defined by
|
---|
355 | * the `AnimationBuilder`.`build()` method that created this factory.
|
---|
356 | * Attaches the new player a DOM element.
|
---|
357 | * @param element The DOM element to which to attach the animation.
|
---|
358 | * @param options A set of options that can include a time delay and
|
---|
359 | * additional developer-defined parameters.
|
---|
360 | */
|
---|
361 | abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
|
---|
362 | }
|
---|
363 |
|
---|
364 | /**
|
---|
365 | * Encapsulates an animation group.
|
---|
366 | * Instantiated and returned by the `{@link animations/group group()}` function.
|
---|
367 | *
|
---|
368 | * @publicApi
|
---|
369 | */
|
---|
370 | export declare interface AnimationGroupMetadata extends AnimationMetadata {
|
---|
371 | /**
|
---|
372 | * One or more animation or style steps that form this group.
|
---|
373 | */
|
---|
374 | steps: AnimationMetadata[];
|
---|
375 | /**
|
---|
376 | * An options object containing a delay and
|
---|
377 | * developer-defined parameters that provide styling defaults and
|
---|
378 | * can be overridden on invocation. Default delay is 0.
|
---|
379 | */
|
---|
380 | options: AnimationOptions | null;
|
---|
381 | }
|
---|
382 |
|
---|
383 | /**
|
---|
384 | * Encapsulates a keyframes sequence. Instantiated and returned by
|
---|
385 | * the `keyframes()` function.
|
---|
386 | *
|
---|
387 | * @publicApi
|
---|
388 | */
|
---|
389 | export declare interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
|
---|
390 | /**
|
---|
391 | * An array of animation styles.
|
---|
392 | */
|
---|
393 | steps: AnimationStyleMetadata[];
|
---|
394 | }
|
---|
395 |
|
---|
396 | /**
|
---|
397 | * Base for animation data structures.
|
---|
398 | *
|
---|
399 | * @publicApi
|
---|
400 | */
|
---|
401 | export declare interface AnimationMetadata {
|
---|
402 | type: AnimationMetadataType;
|
---|
403 | }
|
---|
404 |
|
---|
405 | /**
|
---|
406 | * @description Constants for the categories of parameters that can be defined for animations.
|
---|
407 | *
|
---|
408 | * A corresponding function defines a set of parameters for each category, and
|
---|
409 | * collects them into a corresponding `AnimationMetadata` object.
|
---|
410 | *
|
---|
411 | * @publicApi
|
---|
412 | */
|
---|
413 | export declare const enum AnimationMetadataType {
|
---|
414 | /**
|
---|
415 | * Associates a named animation state with a set of CSS styles.
|
---|
416 | * See `state()`
|
---|
417 | */
|
---|
418 | State = 0,
|
---|
419 | /**
|
---|
420 | * Data for a transition from one animation state to another.
|
---|
421 | * See `transition()`
|
---|
422 | */
|
---|
423 | Transition = 1,
|
---|
424 | /**
|
---|
425 | * Contains a set of animation steps.
|
---|
426 | * See `sequence()`
|
---|
427 | */
|
---|
428 | Sequence = 2,
|
---|
429 | /**
|
---|
430 | * Contains a set of animation steps.
|
---|
431 | * See `{@link animations/group group()}`
|
---|
432 | */
|
---|
433 | Group = 3,
|
---|
434 | /**
|
---|
435 | * Contains an animation step.
|
---|
436 | * See `animate()`
|
---|
437 | */
|
---|
438 | Animate = 4,
|
---|
439 | /**
|
---|
440 | * Contains a set of animation steps.
|
---|
441 | * See `keyframes()`
|
---|
442 | */
|
---|
443 | Keyframes = 5,
|
---|
444 | /**
|
---|
445 | * Contains a set of CSS property-value pairs into a named style.
|
---|
446 | * See `style()`
|
---|
447 | */
|
---|
448 | Style = 6,
|
---|
449 | /**
|
---|
450 | * Associates an animation with an entry trigger that can be attached to an element.
|
---|
451 | * See `trigger()`
|
---|
452 | */
|
---|
453 | Trigger = 7,
|
---|
454 | /**
|
---|
455 | * Contains a re-usable animation.
|
---|
456 | * See `animation()`
|
---|
457 | */
|
---|
458 | Reference = 8,
|
---|
459 | /**
|
---|
460 | * Contains data to use in executing child animations returned by a query.
|
---|
461 | * See `animateChild()`
|
---|
462 | */
|
---|
463 | AnimateChild = 9,
|
---|
464 | /**
|
---|
465 | * Contains animation parameters for a re-usable animation.
|
---|
466 | * See `useAnimation()`
|
---|
467 | */
|
---|
468 | AnimateRef = 10,
|
---|
469 | /**
|
---|
470 | * Contains child-animation query data.
|
---|
471 | * See `query()`
|
---|
472 | */
|
---|
473 | Query = 11,
|
---|
474 | /**
|
---|
475 | * Contains data for staggering an animation sequence.
|
---|
476 | * See `stagger()`
|
---|
477 | */
|
---|
478 | Stagger = 12
|
---|
479 | }
|
---|
480 |
|
---|
481 | /**
|
---|
482 | * @description Options that control animation styling and timing.
|
---|
483 | *
|
---|
484 | * The following animation functions accept `AnimationOptions` data:
|
---|
485 | *
|
---|
486 | * - `transition()`
|
---|
487 | * - `sequence()`
|
---|
488 | * - `{@link animations/group group()}`
|
---|
489 | * - `query()`
|
---|
490 | * - `animation()`
|
---|
491 | * - `useAnimation()`
|
---|
492 | * - `animateChild()`
|
---|
493 | *
|
---|
494 | * Programmatic animations built using the `AnimationBuilder` service also
|
---|
495 | * make use of `AnimationOptions`.
|
---|
496 | *
|
---|
497 | * @publicApi
|
---|
498 | */
|
---|
499 | export declare interface AnimationOptions {
|
---|
500 | /**
|
---|
501 | * Sets a time-delay for initiating an animation action.
|
---|
502 | * A number and optional time unit, such as "1s" or "10ms" for one second
|
---|
503 | * and 10 milliseconds, respectively.The default unit is milliseconds.
|
---|
504 | * Default value is 0, meaning no delay.
|
---|
505 | */
|
---|
506 | delay?: number | string;
|
---|
507 | /**
|
---|
508 | * A set of developer-defined parameters that modify styling and timing
|
---|
509 | * when an animation action starts. An array of key-value pairs, where the provided value
|
---|
510 | * is used as a default.
|
---|
511 | */
|
---|
512 | params?: {
|
---|
513 | [name: string]: any;
|
---|
514 | };
|
---|
515 | }
|
---|
516 |
|
---|
517 | /**
|
---|
518 | * Provides programmatic control of a reusable animation sequence,
|
---|
519 | * built using the `build()` method of `AnimationBuilder`. The `build()` method
|
---|
520 | * returns a factory, whose `create()` method instantiates and initializes this interface.
|
---|
521 | *
|
---|
522 | * @see `AnimationBuilder`
|
---|
523 | * @see `AnimationFactory`
|
---|
524 | * @see `animate()`
|
---|
525 | *
|
---|
526 | * @publicApi
|
---|
527 | */
|
---|
528 | export declare interface AnimationPlayer {
|
---|
529 | /**
|
---|
530 | * Provides a callback to invoke when the animation finishes.
|
---|
531 | * @param fn The callback function.
|
---|
532 | * @see `finish()`
|
---|
533 | */
|
---|
534 | onDone(fn: () => void): void;
|
---|
535 | /**
|
---|
536 | * Provides a callback to invoke when the animation starts.
|
---|
537 | * @param fn The callback function.
|
---|
538 | * @see `run()`
|
---|
539 | */
|
---|
540 | onStart(fn: () => void): void;
|
---|
541 | /**
|
---|
542 | * Provides a callback to invoke after the animation is destroyed.
|
---|
543 | * @param fn The callback function.
|
---|
544 | * @see `destroy()`
|
---|
545 | * @see `beforeDestroy()`
|
---|
546 | */
|
---|
547 | onDestroy(fn: () => void): void;
|
---|
548 | /**
|
---|
549 | * Initializes the animation.
|
---|
550 | */
|
---|
551 | init(): void;
|
---|
552 | /**
|
---|
553 | * Reports whether the animation has started.
|
---|
554 | * @returns True if the animation has started, false otherwise.
|
---|
555 | */
|
---|
556 | hasStarted(): boolean;
|
---|
557 | /**
|
---|
558 | * Runs the animation, invoking the `onStart()` callback.
|
---|
559 | */
|
---|
560 | play(): void;
|
---|
561 | /**
|
---|
562 | * Pauses the animation.
|
---|
563 | */
|
---|
564 | pause(): void;
|
---|
565 | /**
|
---|
566 | * Restarts the paused animation.
|
---|
567 | */
|
---|
568 | restart(): void;
|
---|
569 | /**
|
---|
570 | * Ends the animation, invoking the `onDone()` callback.
|
---|
571 | */
|
---|
572 | finish(): void;
|
---|
573 | /**
|
---|
574 | * Destroys the animation, after invoking the `beforeDestroy()` callback.
|
---|
575 | * Calls the `onDestroy()` callback when destruction is completed.
|
---|
576 | */
|
---|
577 | destroy(): void;
|
---|
578 | /**
|
---|
579 | * Resets the animation to its initial state.
|
---|
580 | */
|
---|
581 | reset(): void;
|
---|
582 | /**
|
---|
583 | * Sets the position of the animation.
|
---|
584 | * @param position A 0-based offset into the duration, in milliseconds.
|
---|
585 | */
|
---|
586 | setPosition(position: any /** TODO #9100 */): void;
|
---|
587 | /**
|
---|
588 | * Reports the current position of the animation.
|
---|
589 | * @returns A 0-based offset into the duration, in milliseconds.
|
---|
590 | */
|
---|
591 | getPosition(): number;
|
---|
592 | /**
|
---|
593 | * The parent of this player, if any.
|
---|
594 | */
|
---|
595 | parentPlayer: AnimationPlayer | null;
|
---|
596 | /**
|
---|
597 | * The total run time of the animation, in milliseconds.
|
---|
598 | */
|
---|
599 | readonly totalTime: number;
|
---|
600 | /**
|
---|
601 | * Provides a callback to invoke before the animation is destroyed.
|
---|
602 | */
|
---|
603 | beforeDestroy?: () => any;
|
---|
604 | }
|
---|
605 |
|
---|
606 | /**
|
---|
607 | * Encapsulates an animation query. Instantiated and returned by
|
---|
608 | * the `query()` function.
|
---|
609 | *
|
---|
610 | * @publicApi
|
---|
611 | */
|
---|
612 | export declare interface AnimationQueryMetadata extends AnimationMetadata {
|
---|
613 | /**
|
---|
614 | * The CSS selector for this query.
|
---|
615 | */
|
---|
616 | selector: string;
|
---|
617 | /**
|
---|
618 | * One or more animation step objects.
|
---|
619 | */
|
---|
620 | animation: AnimationMetadata | AnimationMetadata[];
|
---|
621 | /**
|
---|
622 | * A query options object.
|
---|
623 | */
|
---|
624 | options: AnimationQueryOptions | null;
|
---|
625 | }
|
---|
626 |
|
---|
627 | /**
|
---|
628 | * Encapsulates animation query options.
|
---|
629 | * Passed to the `query()` function.
|
---|
630 | *
|
---|
631 | * @publicApi
|
---|
632 | */
|
---|
633 | export declare interface AnimationQueryOptions extends AnimationOptions {
|
---|
634 | /**
|
---|
635 | * True if this query is optional, false if it is required. Default is false.
|
---|
636 | * A required query throws an error if no elements are retrieved when
|
---|
637 | * the query is executed. An optional query does not.
|
---|
638 | *
|
---|
639 | */
|
---|
640 | optional?: boolean;
|
---|
641 | /**
|
---|
642 | * A maximum total number of results to return from the query.
|
---|
643 | * If negative, results are limited from the end of the query list towards the beginning.
|
---|
644 | * By default, results are not limited.
|
---|
645 | */
|
---|
646 | limit?: number;
|
---|
647 | }
|
---|
648 |
|
---|
649 | /**
|
---|
650 | * Encapsulates a reusable animation, which is a collection of individual animation steps.
|
---|
651 | * Instantiated and returned by the `animation()` function, and
|
---|
652 | * passed to the `useAnimation()` function.
|
---|
653 | *
|
---|
654 | * @publicApi
|
---|
655 | */
|
---|
656 | export declare interface AnimationReferenceMetadata extends AnimationMetadata {
|
---|
657 | /**
|
---|
658 | * One or more animation step objects.
|
---|
659 | */
|
---|
660 | animation: AnimationMetadata | AnimationMetadata[];
|
---|
661 | /**
|
---|
662 | * An options object containing a delay and
|
---|
663 | * developer-defined parameters that provide styling defaults and
|
---|
664 | * can be overridden on invocation. Default delay is 0.
|
---|
665 | */
|
---|
666 | options: AnimationOptions | null;
|
---|
667 | }
|
---|
668 |
|
---|
669 | /**
|
---|
670 | * Encapsulates an animation sequence.
|
---|
671 | * Instantiated and returned by the `sequence()` function.
|
---|
672 | *
|
---|
673 | * @publicApi
|
---|
674 | */
|
---|
675 | export declare interface AnimationSequenceMetadata extends AnimationMetadata {
|
---|
676 | /**
|
---|
677 | * An array of animation step objects.
|
---|
678 | */
|
---|
679 | steps: AnimationMetadata[];
|
---|
680 | /**
|
---|
681 | * An options object containing a delay and
|
---|
682 | * developer-defined parameters that provide styling defaults and
|
---|
683 | * can be overridden on invocation. Default delay is 0.
|
---|
684 | */
|
---|
685 | options: AnimationOptions | null;
|
---|
686 | }
|
---|
687 |
|
---|
688 | /**
|
---|
689 | * Encapsulates parameters for staggering the start times of a set of animation steps.
|
---|
690 | * Instantiated and returned by the `stagger()` function.
|
---|
691 | *
|
---|
692 | * @publicApi
|
---|
693 | **/
|
---|
694 | export declare interface AnimationStaggerMetadata extends AnimationMetadata {
|
---|
695 | /**
|
---|
696 | * The timing data for the steps.
|
---|
697 | */
|
---|
698 | timings: string | number;
|
---|
699 | /**
|
---|
700 | * One or more animation steps.
|
---|
701 | */
|
---|
702 | animation: AnimationMetadata | AnimationMetadata[];
|
---|
703 | }
|
---|
704 |
|
---|
705 | /**
|
---|
706 | * Encapsulates an animation state by associating a state name with a set of CSS styles.
|
---|
707 | * Instantiated and returned by the `state()` function.
|
---|
708 | *
|
---|
709 | * @publicApi
|
---|
710 | */
|
---|
711 | export declare interface AnimationStateMetadata extends AnimationMetadata {
|
---|
712 | /**
|
---|
713 | * The state name, unique within the component.
|
---|
714 | */
|
---|
715 | name: string;
|
---|
716 | /**
|
---|
717 | * The CSS styles associated with this state.
|
---|
718 | */
|
---|
719 | styles: AnimationStyleMetadata;
|
---|
720 | /**
|
---|
721 | * An options object containing
|
---|
722 | * developer-defined parameters that provide styling defaults and
|
---|
723 | * can be overridden on invocation.
|
---|
724 | */
|
---|
725 | options?: {
|
---|
726 | params: {
|
---|
727 | [name: string]: any;
|
---|
728 | };
|
---|
729 | };
|
---|
730 | }
|
---|
731 |
|
---|
732 | /**
|
---|
733 | * Encapsulates an animation style. Instantiated and returned by
|
---|
734 | * the `style()` function.
|
---|
735 | *
|
---|
736 | * @publicApi
|
---|
737 | */
|
---|
738 | export declare interface AnimationStyleMetadata extends AnimationMetadata {
|
---|
739 | /**
|
---|
740 | * A set of CSS style properties.
|
---|
741 | */
|
---|
742 | styles: '*' | {
|
---|
743 | [key: string]: string | number;
|
---|
744 | } | Array<{
|
---|
745 | [key: string]: string | number;
|
---|
746 | } | '*'>;
|
---|
747 | /**
|
---|
748 | * A percentage of the total animate time at which the style is to be applied.
|
---|
749 | */
|
---|
750 | offset: number | null;
|
---|
751 | }
|
---|
752 |
|
---|
753 | /**
|
---|
754 | * Encapsulates an animation transition. Instantiated and returned by the
|
---|
755 | * `transition()` function.
|
---|
756 | *
|
---|
757 | * @publicApi
|
---|
758 | */
|
---|
759 | export declare interface AnimationTransitionMetadata extends AnimationMetadata {
|
---|
760 | /**
|
---|
761 | * An expression that describes a state change.
|
---|
762 | */
|
---|
763 | expr: string | ((fromState: string, toState: string, element?: any, params?: {
|
---|
764 | [key: string]: any;
|
---|
765 | }) => boolean);
|
---|
766 | /**
|
---|
767 | * One or more animation objects to which this transition applies.
|
---|
768 | */
|
---|
769 | animation: AnimationMetadata | AnimationMetadata[];
|
---|
770 | /**
|
---|
771 | * An options object containing a delay and
|
---|
772 | * developer-defined parameters that provide styling defaults and
|
---|
773 | * can be overridden on invocation. Default delay is 0.
|
---|
774 | */
|
---|
775 | options: AnimationOptions | null;
|
---|
776 | }
|
---|
777 |
|
---|
778 | /**
|
---|
779 | * Contains an animation trigger. Instantiated and returned by the
|
---|
780 | * `trigger()` function.
|
---|
781 | *
|
---|
782 | * @publicApi
|
---|
783 | */
|
---|
784 | export declare interface AnimationTriggerMetadata extends AnimationMetadata {
|
---|
785 | /**
|
---|
786 | * The trigger name, used to associate it with an element. Unique within the component.
|
---|
787 | */
|
---|
788 | name: string;
|
---|
789 | /**
|
---|
790 | * An animation definition object, containing an array of state and transition declarations.
|
---|
791 | */
|
---|
792 | definitions: AnimationMetadata[];
|
---|
793 | /**
|
---|
794 | * An options object containing a delay and
|
---|
795 | * developer-defined parameters that provide styling defaults and
|
---|
796 | * can be overridden on invocation. Default delay is 0.
|
---|
797 | */
|
---|
798 | options: {
|
---|
799 | params?: {
|
---|
800 | [name: string]: any;
|
---|
801 | };
|
---|
802 | } | null;
|
---|
803 | }
|
---|
804 |
|
---|
805 | /**
|
---|
806 | * Specifies automatic styling.
|
---|
807 | *
|
---|
808 | * @publicApi
|
---|
809 | */
|
---|
810 | export declare const AUTO_STYLE = "*";
|
---|
811 |
|
---|
812 | /**
|
---|
813 | * @description Defines a list of animation steps to be run in parallel.
|
---|
814 | *
|
---|
815 | * @param steps An array of animation step objects.
|
---|
816 | * - When steps are defined by `style()` or `animate()`
|
---|
817 | * function calls, each call within the group is executed instantly.
|
---|
818 | * - To specify offset styles to be applied at a later time, define steps with
|
---|
819 | * `keyframes()`, or use `animate()` calls with a delay value.
|
---|
820 | * For example:
|
---|
821 | *
|
---|
822 | * ```typescript
|
---|
823 | * group([
|
---|
824 | * animate("1s", style({ background: "black" })),
|
---|
825 | * animate("2s", style({ color: "white" }))
|
---|
826 | * ])
|
---|
827 | * ```
|
---|
828 | *
|
---|
829 | * @param options An options object containing a delay and
|
---|
830 | * developer-defined parameters that provide styling defaults and
|
---|
831 | * can be overridden on invocation.
|
---|
832 | *
|
---|
833 | * @return An object that encapsulates the group data.
|
---|
834 | *
|
---|
835 | * @usageNotes
|
---|
836 | * Grouped animations are useful when a series of styles must be
|
---|
837 | * animated at different starting times and closed off at different ending times.
|
---|
838 | *
|
---|
839 | * When called within a `sequence()` or a
|
---|
840 | * `transition()` call, does not continue to the next
|
---|
841 | * instruction until all of the inner animation steps have completed.
|
---|
842 | *
|
---|
843 | * @publicApi
|
---|
844 | */
|
---|
845 | export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
|
---|
846 |
|
---|
847 | /**
|
---|
848 | * Defines a set of animation styles, associating each style with an optional `offset` value.
|
---|
849 | *
|
---|
850 | * @param steps A set of animation styles with optional offset data.
|
---|
851 | * The optional `offset` value for a style specifies a percentage of the total animation
|
---|
852 | * time at which that style is applied.
|
---|
853 | * @returns An object that encapsulates the keyframes data.
|
---|
854 | *
|
---|
855 | * @usageNotes
|
---|
856 | * Use with the `animate()` call. Instead of applying animations
|
---|
857 | * from the current state
|
---|
858 | * to the destination state, keyframes describe how each style entry is applied and at what point
|
---|
859 | * within the animation arc.
|
---|
860 | * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
|
---|
861 | *
|
---|
862 | * ### Usage
|
---|
863 | *
|
---|
864 | * In the following example, the offset values describe
|
---|
865 | * when each `backgroundColor` value is applied. The color is red at the start, and changes to
|
---|
866 | * blue when 20% of the total time has elapsed.
|
---|
867 | *
|
---|
868 | * ```typescript
|
---|
869 | * // the provided offset values
|
---|
870 | * animate("5s", keyframes([
|
---|
871 | * style({ backgroundColor: "red", offset: 0 }),
|
---|
872 | * style({ backgroundColor: "blue", offset: 0.2 }),
|
---|
873 | * style({ backgroundColor: "orange", offset: 0.3 }),
|
---|
874 | * style({ backgroundColor: "black", offset: 1 })
|
---|
875 | * ]))
|
---|
876 | * ```
|
---|
877 | *
|
---|
878 | * If there are no `offset` values specified in the style entries, the offsets
|
---|
879 | * are calculated automatically.
|
---|
880 | *
|
---|
881 | * ```typescript
|
---|
882 | * animate("5s", keyframes([
|
---|
883 | * style({ backgroundColor: "red" }) // offset = 0
|
---|
884 | * style({ backgroundColor: "blue" }) // offset = 0.33
|
---|
885 | * style({ backgroundColor: "orange" }) // offset = 0.66
|
---|
886 | * style({ backgroundColor: "black" }) // offset = 1
|
---|
887 | * ]))
|
---|
888 | *```
|
---|
889 |
|
---|
890 | * @publicApi
|
---|
891 | */
|
---|
892 | export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
|
---|
893 |
|
---|
894 | /**
|
---|
895 | * An empty programmatic controller for reusable animations.
|
---|
896 | * Used internally when animations are disabled, to avoid
|
---|
897 | * checking for the null case when an animation player is expected.
|
---|
898 | *
|
---|
899 | * @see `animate()`
|
---|
900 | * @see `AnimationPlayer`
|
---|
901 | * @see `GroupPlayer`
|
---|
902 | *
|
---|
903 | * @publicApi
|
---|
904 | */
|
---|
905 | export declare class NoopAnimationPlayer implements AnimationPlayer {
|
---|
906 | private _onDoneFns;
|
---|
907 | private _onStartFns;
|
---|
908 | private _onDestroyFns;
|
---|
909 | private _started;
|
---|
910 | private _destroyed;
|
---|
911 | private _finished;
|
---|
912 | private _position;
|
---|
913 | parentPlayer: AnimationPlayer | null;
|
---|
914 | readonly totalTime: number;
|
---|
915 | constructor(duration?: number, delay?: number);
|
---|
916 | private _onFinish;
|
---|
917 | onStart(fn: () => void): void;
|
---|
918 | onDone(fn: () => void): void;
|
---|
919 | onDestroy(fn: () => void): void;
|
---|
920 | hasStarted(): boolean;
|
---|
921 | init(): void;
|
---|
922 | play(): void;
|
---|
923 | private _onStart;
|
---|
924 | pause(): void;
|
---|
925 | restart(): void;
|
---|
926 | finish(): void;
|
---|
927 | destroy(): void;
|
---|
928 | reset(): void;
|
---|
929 | setPosition(position: number): void;
|
---|
930 | getPosition(): number;
|
---|
931 | }
|
---|
932 |
|
---|
933 | /**
|
---|
934 | * Finds one or more inner elements within the current element that is
|
---|
935 | * being animated within a sequence. Use with `animate()`.
|
---|
936 | *
|
---|
937 | * @param selector The element to query, or a set of elements that contain Angular-specific
|
---|
938 | * characteristics, specified with one or more of the following tokens.
|
---|
939 | * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements.
|
---|
940 | * - `query(":animating")` : Query all currently animating elements.
|
---|
941 | * - `query("@triggerName")` : Query elements that contain an animation trigger.
|
---|
942 | * - `query("@*")` : Query all elements that contain an animation triggers.
|
---|
943 | * - `query(":self")` : Include the current element into the animation sequence.
|
---|
944 | *
|
---|
945 | * @param animation One or more animation steps to apply to the queried element or elements.
|
---|
946 | * An array is treated as an animation sequence.
|
---|
947 | * @param options An options object. Use the 'limit' field to limit the total number of
|
---|
948 | * items to collect.
|
---|
949 | * @return An object that encapsulates the query data.
|
---|
950 | *
|
---|
951 | * @usageNotes
|
---|
952 | * Tokens can be merged into a combined query selector string. For example:
|
---|
953 | *
|
---|
954 | * ```typescript
|
---|
955 | * query(':self, .record:enter, .record:leave, @subTrigger', [...])
|
---|
956 | * ```
|
---|
957 | *
|
---|
958 | * The `query()` function collects multiple elements and works internally by using
|
---|
959 | * `element.querySelectorAll`. Use the `limit` field of an options object to limit
|
---|
960 | * the total number of items to be collected. For example:
|
---|
961 | *
|
---|
962 | * ```js
|
---|
963 | * query('div', [
|
---|
964 | * animate(...),
|
---|
965 | * animate(...)
|
---|
966 | * ], { limit: 1 })
|
---|
967 | * ```
|
---|
968 | *
|
---|
969 | * By default, throws an error when zero items are found. Set the
|
---|
970 | * `optional` flag to ignore this error. For example:
|
---|
971 | *
|
---|
972 | * ```js
|
---|
973 | * query('.some-element-that-may-not-be-there', [
|
---|
974 | * animate(...),
|
---|
975 | * animate(...)
|
---|
976 | * ], { optional: true })
|
---|
977 | * ```
|
---|
978 | *
|
---|
979 | * ### Usage Example
|
---|
980 | *
|
---|
981 | * The following example queries for inner elements and animates them
|
---|
982 | * individually using `animate()`.
|
---|
983 | *
|
---|
984 | * ```typescript
|
---|
985 | * @Component({
|
---|
986 | * selector: 'inner',
|
---|
987 | * template: `
|
---|
988 | * <div [@queryAnimation]="exp">
|
---|
989 | * <h1>Title</h1>
|
---|
990 | * <div class="content">
|
---|
991 | * Blah blah blah
|
---|
992 | * </div>
|
---|
993 | * </div>
|
---|
994 | * `,
|
---|
995 | * animations: [
|
---|
996 | * trigger('queryAnimation', [
|
---|
997 | * transition('* => goAnimate', [
|
---|
998 | * // hide the inner elements
|
---|
999 | * query('h1', style({ opacity: 0 })),
|
---|
1000 | * query('.content', style({ opacity: 0 })),
|
---|
1001 | *
|
---|
1002 | * // animate the inner elements in, one by one
|
---|
1003 | * query('h1', animate(1000, style({ opacity: 1 }))),
|
---|
1004 | * query('.content', animate(1000, style({ opacity: 1 }))),
|
---|
1005 | * ])
|
---|
1006 | * ])
|
---|
1007 | * ]
|
---|
1008 | * })
|
---|
1009 | * class Cmp {
|
---|
1010 | * exp = '';
|
---|
1011 | *
|
---|
1012 | * goAnimate() {
|
---|
1013 | * this.exp = 'goAnimate';
|
---|
1014 | * }
|
---|
1015 | * }
|
---|
1016 | * ```
|
---|
1017 | *
|
---|
1018 | * @publicApi
|
---|
1019 | */
|
---|
1020 | export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
|
---|
1021 |
|
---|
1022 | /**
|
---|
1023 | * Defines a list of animation steps to be run sequentially, one by one.
|
---|
1024 | *
|
---|
1025 | * @param steps An array of animation step objects.
|
---|
1026 | * - Steps defined by `style()` calls apply the styling data immediately.
|
---|
1027 | * - Steps defined by `animate()` calls apply the styling data over time
|
---|
1028 | * as specified by the timing data.
|
---|
1029 | *
|
---|
1030 | * ```typescript
|
---|
1031 | * sequence([
|
---|
1032 | * style({ opacity: 0 }),
|
---|
1033 | * animate("1s", style({ opacity: 1 }))
|
---|
1034 | * ])
|
---|
1035 | * ```
|
---|
1036 | *
|
---|
1037 | * @param options An options object containing a delay and
|
---|
1038 | * developer-defined parameters that provide styling defaults and
|
---|
1039 | * can be overridden on invocation.
|
---|
1040 | *
|
---|
1041 | * @return An object that encapsulates the sequence data.
|
---|
1042 | *
|
---|
1043 | * @usageNotes
|
---|
1044 | * When you pass an array of steps to a
|
---|
1045 | * `transition()` call, the steps run sequentially by default.
|
---|
1046 | * Compare this to the `{@link animations/group group()}` call, which runs animation steps in
|
---|
1047 | *parallel.
|
---|
1048 | *
|
---|
1049 | * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
|
---|
1050 | * execution continues to the next instruction only after each of the inner animation
|
---|
1051 | * steps have completed.
|
---|
1052 | *
|
---|
1053 | * @publicApi
|
---|
1054 | **/
|
---|
1055 | export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
|
---|
1056 |
|
---|
1057 | /**
|
---|
1058 | * Use within an animation `query()` call to issue a timing gap after
|
---|
1059 | * each queried item is animated.
|
---|
1060 | *
|
---|
1061 | * @param timings A delay value.
|
---|
1062 | * @param animation One ore more animation steps.
|
---|
1063 | * @returns An object that encapsulates the stagger data.
|
---|
1064 | *
|
---|
1065 | * @usageNotes
|
---|
1066 | * In the following example, a container element wraps a list of items stamped out
|
---|
1067 | * by an `ngFor`. The container element contains an animation trigger that will later be set
|
---|
1068 | * to query for each of the inner items.
|
---|
1069 | *
|
---|
1070 | * Each time items are added, the opacity fade-in animation runs,
|
---|
1071 | * and each removed item is faded out.
|
---|
1072 | * When either of these animations occur, the stagger effect is
|
---|
1073 | * applied after each item's animation is started.
|
---|
1074 | *
|
---|
1075 | * ```html
|
---|
1076 | * <!-- list.component.html -->
|
---|
1077 | * <button (click)="toggle()">Show / Hide Items</button>
|
---|
1078 | * <hr />
|
---|
1079 | * <div [@listAnimation]="items.length">
|
---|
1080 | * <div *ngFor="let item of items">
|
---|
1081 | * {{ item }}
|
---|
1082 | * </div>
|
---|
1083 | * </div>
|
---|
1084 | * ```
|
---|
1085 | *
|
---|
1086 | * Here is the component code:
|
---|
1087 | *
|
---|
1088 | * ```typescript
|
---|
1089 | * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
|
---|
1090 | * @Component({
|
---|
1091 | * templateUrl: 'list.component.html',
|
---|
1092 | * animations: [
|
---|
1093 | * trigger('listAnimation', [
|
---|
1094 | * ...
|
---|
1095 | * ])
|
---|
1096 | * ]
|
---|
1097 | * })
|
---|
1098 | * class ListComponent {
|
---|
1099 | * items = [];
|
---|
1100 | *
|
---|
1101 | * showItems() {
|
---|
1102 | * this.items = [0,1,2,3,4];
|
---|
1103 | * }
|
---|
1104 | *
|
---|
1105 | * hideItems() {
|
---|
1106 | * this.items = [];
|
---|
1107 | * }
|
---|
1108 | *
|
---|
1109 | * toggle() {
|
---|
1110 | * this.items.length ? this.hideItems() : this.showItems();
|
---|
1111 | * }
|
---|
1112 | * }
|
---|
1113 | * ```
|
---|
1114 | *
|
---|
1115 | * Here is the animation trigger code:
|
---|
1116 | *
|
---|
1117 | * ```typescript
|
---|
1118 | * trigger('listAnimation', [
|
---|
1119 | * transition('* => *', [ // each time the binding value changes
|
---|
1120 | * query(':leave', [
|
---|
1121 | * stagger(100, [
|
---|
1122 | * animate('0.5s', style({ opacity: 0 }))
|
---|
1123 | * ])
|
---|
1124 | * ]),
|
---|
1125 | * query(':enter', [
|
---|
1126 | * style({ opacity: 0 }),
|
---|
1127 | * stagger(100, [
|
---|
1128 | * animate('0.5s', style({ opacity: 1 }))
|
---|
1129 | * ])
|
---|
1130 | * ])
|
---|
1131 | * ])
|
---|
1132 | * ])
|
---|
1133 | * ```
|
---|
1134 | *
|
---|
1135 | * @publicApi
|
---|
1136 | */
|
---|
1137 | export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
|
---|
1138 |
|
---|
1139 | /**
|
---|
1140 | * Declares an animation state within a trigger attached to an element.
|
---|
1141 | *
|
---|
1142 | * @param name One or more names for the defined state in a comma-separated string.
|
---|
1143 | * The following reserved state names can be supplied to define a style for specific use
|
---|
1144 | * cases:
|
---|
1145 | *
|
---|
1146 | * - `void` You can associate styles with this name to be used when
|
---|
1147 | * the element is detached from the application. For example, when an `ngIf` evaluates
|
---|
1148 | * to false, the state of the associated element is void.
|
---|
1149 | * - `*` (asterisk) Indicates the default state. You can associate styles with this name
|
---|
1150 | * to be used as the fallback when the state that is being animated is not declared
|
---|
1151 | * within the trigger.
|
---|
1152 | *
|
---|
1153 | * @param styles A set of CSS styles associated with this state, created using the
|
---|
1154 | * `style()` function.
|
---|
1155 | * This set of styles persists on the element once the state has been reached.
|
---|
1156 | * @param options Parameters that can be passed to the state when it is invoked.
|
---|
1157 | * 0 or more key-value pairs.
|
---|
1158 | * @return An object that encapsulates the new state data.
|
---|
1159 | *
|
---|
1160 | * @usageNotes
|
---|
1161 | * Use the `trigger()` function to register states to an animation trigger.
|
---|
1162 | * Use the `transition()` function to animate between states.
|
---|
1163 | * When a state is active within a component, its associated styles persist on the element,
|
---|
1164 | * even when the animation ends.
|
---|
1165 | *
|
---|
1166 | * @publicApi
|
---|
1167 | **/
|
---|
1168 | export declare function state(name: string, styles: AnimationStyleMetadata, options?: {
|
---|
1169 | params: {
|
---|
1170 | [name: string]: any;
|
---|
1171 | };
|
---|
1172 | }): AnimationStateMetadata;
|
---|
1173 |
|
---|
1174 | /**
|
---|
1175 | * Declares a key/value object containing CSS properties/styles that
|
---|
1176 | * can then be used for an animation `state`, within an animation `sequence`,
|
---|
1177 | * or as styling data for calls to `animate()` and `keyframes()`.
|
---|
1178 | *
|
---|
1179 | * @param tokens A set of CSS styles or HTML styles associated with an animation state.
|
---|
1180 | * The value can be any of the following:
|
---|
1181 | * - A key-value style pair associating a CSS property with a value.
|
---|
1182 | * - An array of key-value style pairs.
|
---|
1183 | * - An asterisk (*), to use auto-styling, where styles are derived from the element
|
---|
1184 | * being animated and applied to the animation when it starts.
|
---|
1185 | *
|
---|
1186 | * Auto-styling can be used to define a state that depends on layout or other
|
---|
1187 | * environmental factors.
|
---|
1188 | *
|
---|
1189 | * @return An object that encapsulates the style data.
|
---|
1190 | *
|
---|
1191 | * @usageNotes
|
---|
1192 | * The following examples create animation styles that collect a set of
|
---|
1193 | * CSS property values:
|
---|
1194 | *
|
---|
1195 | * ```typescript
|
---|
1196 | * // string values for CSS properties
|
---|
1197 | * style({ background: "red", color: "blue" })
|
---|
1198 | *
|
---|
1199 | * // numerical pixel values
|
---|
1200 | * style({ width: 100, height: 0 })
|
---|
1201 | * ```
|
---|
1202 | *
|
---|
1203 | * The following example uses auto-styling to allow a component to animate from
|
---|
1204 | * a height of 0 up to the height of the parent element:
|
---|
1205 | *
|
---|
1206 | * ```
|
---|
1207 | * style({ height: 0 }),
|
---|
1208 | * animate("1s", style({ height: "*" }))
|
---|
1209 | * ```
|
---|
1210 | *
|
---|
1211 | * @publicApi
|
---|
1212 | **/
|
---|
1213 | export declare function style(tokens: '*' | {
|
---|
1214 | [key: string]: string | number;
|
---|
1215 | } | Array<'*' | {
|
---|
1216 | [key: string]: string | number;
|
---|
1217 | }>): AnimationStyleMetadata;
|
---|
1218 |
|
---|
1219 | /**
|
---|
1220 | * Declares an animation transition as a sequence of animation steps to run when a given
|
---|
1221 | * condition is satisfied. The condition is a Boolean expression or function that compares
|
---|
1222 | * the previous and current animation states, and returns true if this transition should occur.
|
---|
1223 | * When the state criteria of a defined transition are met, the associated animation is
|
---|
1224 | * triggered.
|
---|
1225 | *
|
---|
1226 | * @param stateChangeExpr A Boolean expression or function that compares the previous and current
|
---|
1227 | * animation states, and returns true if this transition should occur. Note that "true" and "false"
|
---|
1228 | * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the
|
---|
1229 | * animation trigger element.
|
---|
1230 | * The animation steps run when the expression evaluates to true.
|
---|
1231 | *
|
---|
1232 | * - A state-change string takes the form "state1 => state2", where each side is a defined animation
|
---|
1233 | * state, or an asterix (*) to refer to a dynamic start or end state.
|
---|
1234 | * - The expression string can contain multiple comma-separated statements;
|
---|
1235 | * for example "state1 => state2, state3 => state4".
|
---|
1236 | * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,
|
---|
1237 | * equivalent to "void => *" and "* => void".
|
---|
1238 | * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has
|
---|
1239 | * increased or decreased in value.
|
---|
1240 | * - A function is executed each time a state change occurs in the animation trigger element.
|
---|
1241 | * The animation steps run when the function returns true.
|
---|
1242 | *
|
---|
1243 | * @param steps One or more animation objects, as returned by the `animate()` or
|
---|
1244 | * `sequence()` function, that form a transformation from one state to another.
|
---|
1245 | * A sequence is used by default when you pass an array.
|
---|
1246 | * @param options An options object that can contain a delay value for the start of the animation,
|
---|
1247 | * and additional developer-defined parameters. Provided values for additional parameters are used
|
---|
1248 | * as defaults, and override values can be passed to the caller on invocation.
|
---|
1249 | * @returns An object that encapsulates the transition data.
|
---|
1250 | *
|
---|
1251 | * @usageNotes
|
---|
1252 | * The template associated with a component binds an animation trigger to an element.
|
---|
1253 | *
|
---|
1254 | * ```HTML
|
---|
1255 | * <!-- somewhere inside of my-component-tpl.html -->
|
---|
1256 | * <div [@myAnimationTrigger]="myStatusExp">...</div>
|
---|
1257 | * ```
|
---|
1258 | *
|
---|
1259 | * All transitions are defined within an animation trigger,
|
---|
1260 | * along with named states that the transitions change to and from.
|
---|
1261 | *
|
---|
1262 | * ```typescript
|
---|
1263 | * trigger("myAnimationTrigger", [
|
---|
1264 | * // define states
|
---|
1265 | * state("on", style({ background: "green" })),
|
---|
1266 | * state("off", style({ background: "grey" })),
|
---|
1267 | * ...]
|
---|
1268 | * ```
|
---|
1269 | *
|
---|
1270 | * Note that when you call the `sequence()` function within a `{@link animations/group group()}`
|
---|
1271 | * or a `transition()` call, execution does not continue to the next instruction
|
---|
1272 | * until each of the inner animation steps have completed.
|
---|
1273 | *
|
---|
1274 | * ### Syntax examples
|
---|
1275 | *
|
---|
1276 | * The following examples define transitions between the two defined states (and default states),
|
---|
1277 | * using various options:
|
---|
1278 | *
|
---|
1279 | * ```typescript
|
---|
1280 | * // Transition occurs when the state value
|
---|
1281 | * // bound to "myAnimationTrigger" changes from "on" to "off"
|
---|
1282 | * transition("on => off", animate(500))
|
---|
1283 | * // Run the same animation for both directions
|
---|
1284 | * transition("on <=> off", animate(500))
|
---|
1285 | * // Define multiple state-change pairs separated by commas
|
---|
1286 | * transition("on => off, off => void", animate(500))
|
---|
1287 | * ```
|
---|
1288 | *
|
---|
1289 | * ### Special values for state-change expressions
|
---|
1290 | *
|
---|
1291 | * - Catch-all state change for when an element is inserted into the page and the
|
---|
1292 | * destination state is unknown:
|
---|
1293 | *
|
---|
1294 | * ```typescript
|
---|
1295 | * transition("void => *", [
|
---|
1296 | * style({ opacity: 0 }),
|
---|
1297 | * animate(500)
|
---|
1298 | * ])
|
---|
1299 | * ```
|
---|
1300 | *
|
---|
1301 | * - Capture a state change between any states:
|
---|
1302 | *
|
---|
1303 | * `transition("* => *", animate("1s 0s"))`
|
---|
1304 | *
|
---|
1305 | * - Entry and exit transitions:
|
---|
1306 | *
|
---|
1307 | * ```typescript
|
---|
1308 | * transition(":enter", [
|
---|
1309 | * style({ opacity: 0 }),
|
---|
1310 | * animate(500, style({ opacity: 1 }))
|
---|
1311 | * ]),
|
---|
1312 | * transition(":leave", [
|
---|
1313 | * animate(500, style({ opacity: 0 }))
|
---|
1314 | * ])
|
---|
1315 | * ```
|
---|
1316 | *
|
---|
1317 | * - Use `:increment` and `:decrement` to initiate transitions:
|
---|
1318 | *
|
---|
1319 | * ```typescript
|
---|
1320 | * transition(":increment", group([
|
---|
1321 | * query(':enter', [
|
---|
1322 | * style({ left: '100%' }),
|
---|
1323 | * animate('0.5s ease-out', style('*'))
|
---|
1324 | * ]),
|
---|
1325 | * query(':leave', [
|
---|
1326 | * animate('0.5s ease-out', style({ left: '-100%' }))
|
---|
1327 | * ])
|
---|
1328 | * ]))
|
---|
1329 | *
|
---|
1330 | * transition(":decrement", group([
|
---|
1331 | * query(':enter', [
|
---|
1332 | * style({ left: '100%' }),
|
---|
1333 | * animate('0.5s ease-out', style('*'))
|
---|
1334 | * ]),
|
---|
1335 | * query(':leave', [
|
---|
1336 | * animate('0.5s ease-out', style({ left: '-100%' }))
|
---|
1337 | * ])
|
---|
1338 | * ]))
|
---|
1339 | * ```
|
---|
1340 | *
|
---|
1341 | * ### State-change functions
|
---|
1342 | *
|
---|
1343 | * Here is an example of a `fromState` specified as a state-change function that invokes an
|
---|
1344 | * animation when true:
|
---|
1345 | *
|
---|
1346 | * ```typescript
|
---|
1347 | * transition((fromState, toState) =>
|
---|
1348 | * {
|
---|
1349 | * return fromState == "off" && toState == "on";
|
---|
1350 | * },
|
---|
1351 | * animate("1s 0s"))
|
---|
1352 | * ```
|
---|
1353 | *
|
---|
1354 | * ### Animating to the final state
|
---|
1355 | *
|
---|
1356 | * If the final step in a transition is a call to `animate()` that uses a timing value
|
---|
1357 | * with no style data, that step is automatically considered the final animation arc,
|
---|
1358 | * for the element to reach the final state. Angular automatically adds or removes
|
---|
1359 | * CSS styles to ensure that the element is in the correct final state.
|
---|
1360 | *
|
---|
1361 | * The following example defines a transition that starts by hiding the element,
|
---|
1362 | * then makes sure that it animates properly to whatever state is currently active for trigger:
|
---|
1363 | *
|
---|
1364 | * ```typescript
|
---|
1365 | * transition("void => *", [
|
---|
1366 | * style({ opacity: 0 }),
|
---|
1367 | * animate(500)
|
---|
1368 | * ])
|
---|
1369 | * ```
|
---|
1370 | * ### Boolean value matching
|
---|
1371 | * If a trigger binding value is a Boolean, it can be matched using a transition expression
|
---|
1372 | * that compares true and false or 1 and 0. For example:
|
---|
1373 | *
|
---|
1374 | * ```
|
---|
1375 | * // in the template
|
---|
1376 | * <div [@openClose]="open ? true : false">...</div>
|
---|
1377 | * // in the component metadata
|
---|
1378 | * trigger('openClose', [
|
---|
1379 | * state('true', style({ height: '*' })),
|
---|
1380 | * state('false', style({ height: '0px' })),
|
---|
1381 | * transition('false <=> true', animate(500))
|
---|
1382 | * ])
|
---|
1383 | * ```
|
---|
1384 | *
|
---|
1385 | * @publicApi
|
---|
1386 | **/
|
---|
1387 | export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
|
---|
1388 | [key: string]: any;
|
---|
1389 | }) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
|
---|
1390 |
|
---|
1391 | /**
|
---|
1392 | * Creates a named animation trigger, containing a list of `state()`
|
---|
1393 | * and `transition()` entries to be evaluated when the expression
|
---|
1394 | * bound to the trigger changes.
|
---|
1395 | *
|
---|
1396 | * @param name An identifying string.
|
---|
1397 | * @param definitions An animation definition object, containing an array of `state()`
|
---|
1398 | * and `transition()` declarations.
|
---|
1399 | *
|
---|
1400 | * @return An object that encapsulates the trigger data.
|
---|
1401 | *
|
---|
1402 | * @usageNotes
|
---|
1403 | * Define an animation trigger in the `animations` section of `@Component` metadata.
|
---|
1404 | * In the template, reference the trigger by name and bind it to a trigger expression that
|
---|
1405 | * evaluates to a defined animation state, using the following format:
|
---|
1406 | *
|
---|
1407 | * `[@triggerName]="expression"`
|
---|
1408 | *
|
---|
1409 | * Animation trigger bindings convert all values to strings, and then match the
|
---|
1410 | * previous and current values against any linked transitions.
|
---|
1411 | * Booleans can be specified as `1` or `true` and `0` or `false`.
|
---|
1412 | *
|
---|
1413 | * ### Usage Example
|
---|
1414 | *
|
---|
1415 | * The following example creates an animation trigger reference based on the provided
|
---|
1416 | * name value.
|
---|
1417 | * The provided animation value is expected to be an array consisting of state and
|
---|
1418 | * transition declarations.
|
---|
1419 | *
|
---|
1420 | * ```typescript
|
---|
1421 | * @Component({
|
---|
1422 | * selector: "my-component",
|
---|
1423 | * templateUrl: "my-component-tpl.html",
|
---|
1424 | * animations: [
|
---|
1425 | * trigger("myAnimationTrigger", [
|
---|
1426 | * state(...),
|
---|
1427 | * state(...),
|
---|
1428 | * transition(...),
|
---|
1429 | * transition(...)
|
---|
1430 | * ])
|
---|
1431 | * ]
|
---|
1432 | * })
|
---|
1433 | * class MyComponent {
|
---|
1434 | * myStatusExp = "something";
|
---|
1435 | * }
|
---|
1436 | * ```
|
---|
1437 | *
|
---|
1438 | * The template associated with this component makes use of the defined trigger
|
---|
1439 | * by binding to an element within its template code.
|
---|
1440 | *
|
---|
1441 | * ```html
|
---|
1442 | * <!-- somewhere inside of my-component-tpl.html -->
|
---|
1443 | * <div [@myAnimationTrigger]="myStatusExp">...</div>
|
---|
1444 | * ```
|
---|
1445 | *
|
---|
1446 | * ### Using an inline function
|
---|
1447 | * The `transition` animation method also supports reading an inline function which can decide
|
---|
1448 | * if its associated animation should be run.
|
---|
1449 | *
|
---|
1450 | * ```typescript
|
---|
1451 | * // this method is run each time the `myAnimationTrigger` trigger value changes.
|
---|
1452 | * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
|
---|
1453 | string]: any}): boolean {
|
---|
1454 | * // notice that `element` and `params` are also available here
|
---|
1455 | * return toState == 'yes-please-animate';
|
---|
1456 | * }
|
---|
1457 | *
|
---|
1458 | * @Component({
|
---|
1459 | * selector: 'my-component',
|
---|
1460 | * templateUrl: 'my-component-tpl.html',
|
---|
1461 | * animations: [
|
---|
1462 | * trigger('myAnimationTrigger', [
|
---|
1463 | * transition(myInlineMatcherFn, [
|
---|
1464 | * // the animation sequence code
|
---|
1465 | * ]),
|
---|
1466 | * ])
|
---|
1467 | * ]
|
---|
1468 | * })
|
---|
1469 | * class MyComponent {
|
---|
1470 | * myStatusExp = "yes-please-animate";
|
---|
1471 | * }
|
---|
1472 | * ```
|
---|
1473 | *
|
---|
1474 | * ### Disabling Animations
|
---|
1475 | * When true, the special animation control binding `@.disabled` binding prevents
|
---|
1476 | * all animations from rendering.
|
---|
1477 | * Place the `@.disabled` binding on an element to disable
|
---|
1478 | * animations on the element itself, as well as any inner animation triggers
|
---|
1479 | * within the element.
|
---|
1480 | *
|
---|
1481 | * The following example shows how to use this feature:
|
---|
1482 | *
|
---|
1483 | * ```typescript
|
---|
1484 | * @Component({
|
---|
1485 | * selector: 'my-component',
|
---|
1486 | * template: `
|
---|
1487 | * <div [@.disabled]="isDisabled">
|
---|
1488 | * <div [@childAnimation]="exp"></div>
|
---|
1489 | * </div>
|
---|
1490 | * `,
|
---|
1491 | * animations: [
|
---|
1492 | * trigger("childAnimation", [
|
---|
1493 | * // ...
|
---|
1494 | * ])
|
---|
1495 | * ]
|
---|
1496 | * })
|
---|
1497 | * class MyComponent {
|
---|
1498 | * isDisabled = true;
|
---|
1499 | * exp = '...';
|
---|
1500 | * }
|
---|
1501 | * ```
|
---|
1502 | *
|
---|
1503 | * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
|
---|
1504 | * along with any inner animations.
|
---|
1505 | *
|
---|
1506 | * ### Disable animations application-wide
|
---|
1507 | * When an area of the template is set to have animations disabled,
|
---|
1508 | * **all** inner components have their animations disabled as well.
|
---|
1509 | * This means that you can disable all animations for an app
|
---|
1510 | * by placing a host binding set on `@.disabled` on the topmost Angular component.
|
---|
1511 | *
|
---|
1512 | * ```typescript
|
---|
1513 | * import {Component, HostBinding} from '@angular/core';
|
---|
1514 | *
|
---|
1515 | * @Component({
|
---|
1516 | * selector: 'app-component',
|
---|
1517 | * templateUrl: 'app.component.html',
|
---|
1518 | * })
|
---|
1519 | * class AppComponent {
|
---|
1520 | * @HostBinding('@.disabled')
|
---|
1521 | * public animationsDisabled = true;
|
---|
1522 | * }
|
---|
1523 | * ```
|
---|
1524 | *
|
---|
1525 | * ### Overriding disablement of inner animations
|
---|
1526 | * Despite inner animations being disabled, a parent animation can `query()`
|
---|
1527 | * for inner elements located in disabled areas of the template and still animate
|
---|
1528 | * them if needed. This is also the case for when a sub animation is
|
---|
1529 | * queried by a parent and then later animated using `animateChild()`.
|
---|
1530 | *
|
---|
1531 | * ### Detecting when an animation is disabled
|
---|
1532 | * If a region of the DOM (or the entire application) has its animations disabled, the animation
|
---|
1533 | * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
|
---|
1534 | * an instance of an `AnimationEvent`. If animations are disabled,
|
---|
1535 | * the `.disabled` flag on the event is true.
|
---|
1536 | *
|
---|
1537 | * @publicApi
|
---|
1538 | */
|
---|
1539 | export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
|
---|
1540 |
|
---|
1541 | /**
|
---|
1542 | * Starts a reusable animation that is created using the `animation()` function.
|
---|
1543 | *
|
---|
1544 | * @param animation The reusable animation to start.
|
---|
1545 | * @param options An options object that can contain a delay value for the start of
|
---|
1546 | * the animation, and additional override values for developer-defined parameters.
|
---|
1547 | * @return An object that contains the animation parameters.
|
---|
1548 | *
|
---|
1549 | * @publicApi
|
---|
1550 | */
|
---|
1551 | export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
|
---|
1552 |
|
---|
1553 | /**
|
---|
1554 | * A programmatic controller for a group of reusable animations.
|
---|
1555 | * Used internally to control animations.
|
---|
1556 | *
|
---|
1557 | * @see `AnimationPlayer`
|
---|
1558 | * @see `{@link animations/group group()}`
|
---|
1559 | *
|
---|
1560 | */
|
---|
1561 | export declare class ɵAnimationGroupPlayer implements AnimationPlayer {
|
---|
1562 | private _onDoneFns;
|
---|
1563 | private _onStartFns;
|
---|
1564 | private _finished;
|
---|
1565 | private _started;
|
---|
1566 | private _destroyed;
|
---|
1567 | private _onDestroyFns;
|
---|
1568 | parentPlayer: AnimationPlayer | null;
|
---|
1569 | totalTime: number;
|
---|
1570 | readonly players: AnimationPlayer[];
|
---|
1571 | constructor(_players: AnimationPlayer[]);
|
---|
1572 | private _onFinish;
|
---|
1573 | init(): void;
|
---|
1574 | onStart(fn: () => void): void;
|
---|
1575 | private _onStart;
|
---|
1576 | onDone(fn: () => void): void;
|
---|
1577 | onDestroy(fn: () => void): void;
|
---|
1578 | hasStarted(): boolean;
|
---|
1579 | play(): void;
|
---|
1580 | pause(): void;
|
---|
1581 | restart(): void;
|
---|
1582 | finish(): void;
|
---|
1583 | destroy(): void;
|
---|
1584 | private _onDestroy;
|
---|
1585 | reset(): void;
|
---|
1586 | setPosition(p: number): void;
|
---|
1587 | getPosition(): number;
|
---|
1588 | beforeDestroy(): void;
|
---|
1589 | }
|
---|
1590 |
|
---|
1591 | export declare const ɵPRE_STYLE = "!";
|
---|
1592 |
|
---|
1593 |
|
---|
1594 | /**
|
---|
1595 | * Represents a set of CSS styles for use in an animation style.
|
---|
1596 | */
|
---|
1597 | export declare interface ɵStyleData {
|
---|
1598 | [key: string]: string | number;
|
---|
1599 | }
|
---|
1600 |
|
---|
1601 | export { }
|
---|