[6a3a178] | 1 | /**
|
---|
| 2 | * @license Angular v12.2.9
|
---|
| 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 { }
|
---|