@angular/animations 13.1.0-next.3 → 13.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animations.d.ts +172 -164
- package/browser/browser.d.ts +10 -9
- package/browser/testing/testing.d.ts +3 -3
- package/esm2020/browser/src/dsl/animation.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_ast_builder.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_timeline_builder.mjs +18 -7
- package/esm2020/browser/src/dsl/animation_transition_factory.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_transition_instruction.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_trigger.mjs +1 -1
- package/esm2020/browser/src/dsl/element_instruction_map.mjs +3 -10
- package/esm2020/browser/src/private_export.mjs +2 -2
- package/esm2020/browser/src/render/animation_driver.mjs +8 -7
- package/esm2020/browser/src/render/animation_engine_next.mjs +1 -1
- package/esm2020/browser/src/render/css_keyframes/css_keyframes_driver.mjs +5 -4
- package/esm2020/browser/src/render/shared.mjs +4 -38
- package/esm2020/browser/src/render/timeline_animation_engine.mjs +1 -1
- package/esm2020/browser/src/render/transition_animation_engine.mjs +35 -37
- package/esm2020/browser/src/render/web_animations/web_animations_driver.mjs +5 -4
- package/esm2020/browser/src/render/web_animations/web_animations_player.mjs +7 -4
- package/esm2020/browser/src/util.mjs +1 -3
- package/esm2020/browser/testing/src/mock_animation_driver.mjs +4 -4
- package/esm2020/src/animation_builder.mjs +6 -4
- package/esm2020/src/animation_metadata.mjs +156 -153
- package/esm2020/src/players/animation_player.mjs +1 -1
- package/esm2020/src/version.mjs +3 -16
- package/fesm2015/animations.mjs +162 -157
- package/fesm2015/animations.mjs.map +1 -1
- package/fesm2015/browser/testing.mjs +5 -5
- package/fesm2015/browser/testing.mjs.map +1 -1
- package/fesm2015/browser.mjs +80 -105
- package/fesm2015/browser.mjs.map +1 -1
- package/fesm2020/animations.mjs +162 -157
- package/fesm2020/animations.mjs.map +1 -1
- package/fesm2020/browser/testing.mjs +5 -5
- package/fesm2020/browser/testing.mjs.map +1 -1
- package/fesm2020/browser.mjs +77 -105
- package/fesm2020/browser.mjs.map +1 -1
- package/package.json +2 -2
package/animations.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v13.1.
|
|
3
|
-
* (c) 2010-
|
|
2
|
+
* @license Angular v13.1.3
|
|
3
|
+
* (c) 2010-2022 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -236,8 +236,8 @@ export declare interface AnimationAnimateRefMetadata extends AnimationMetadata {
|
|
|
236
236
|
* Apps do not typically need to create their own animation players, but if you
|
|
237
237
|
* do need to, follow these steps:
|
|
238
238
|
*
|
|
239
|
-
* 1. Use the
|
|
240
|
-
*
|
|
239
|
+
* 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
|
|
240
|
+
* to create a programmatic animation. The method returns an `AnimationFactory` instance.
|
|
241
241
|
*
|
|
242
242
|
* 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
|
|
243
243
|
*
|
|
@@ -345,16 +345,19 @@ declare interface AnimationEvent_2 {
|
|
|
345
345
|
export { AnimationEvent_2 as AnimationEvent }
|
|
346
346
|
|
|
347
347
|
/**
|
|
348
|
-
* A factory object returned from the
|
|
348
|
+
* A factory object returned from the
|
|
349
|
+
* <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
|
|
350
|
+
* method.
|
|
349
351
|
*
|
|
350
352
|
* @publicApi
|
|
351
353
|
*/
|
|
352
354
|
export declare abstract class AnimationFactory {
|
|
353
355
|
/**
|
|
354
356
|
* Creates an `AnimationPlayer` instance for the reusable animation defined by
|
|
355
|
-
* the
|
|
356
|
-
*
|
|
357
|
-
*
|
|
357
|
+
* the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
|
|
358
|
+
* method that created this factory and attaches the new player a DOM element.
|
|
359
|
+
*
|
|
360
|
+
* @param element The DOM element to which to attach the player.
|
|
358
361
|
* @param options A set of options that can include a time delay and
|
|
359
362
|
* additional developer-defined parameters.
|
|
360
363
|
*/
|
|
@@ -413,7 +416,7 @@ export declare interface AnimationMetadata {
|
|
|
413
416
|
export declare const enum AnimationMetadataType {
|
|
414
417
|
/**
|
|
415
418
|
* Associates a named animation state with a set of CSS styles.
|
|
416
|
-
* See `state()`
|
|
419
|
+
* See [`state()`](api/animations/state)
|
|
417
420
|
*/
|
|
418
421
|
State = 0,
|
|
419
422
|
/**
|
|
@@ -516,8 +519,10 @@ export declare interface AnimationOptions {
|
|
|
516
519
|
|
|
517
520
|
/**
|
|
518
521
|
* Provides programmatic control of a reusable animation sequence,
|
|
519
|
-
* built using the
|
|
520
|
-
*
|
|
522
|
+
* built using the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
|
|
523
|
+
* method which returns an `AnimationFactory`, whose
|
|
524
|
+
* <code>[create](api/animations/AnimationFactory#create)()</code> method instantiates and
|
|
525
|
+
* initializes this interface.
|
|
521
526
|
*
|
|
522
527
|
* @see `AnimationBuilder`
|
|
523
528
|
* @see `AnimationFactory`
|
|
@@ -704,7 +709,7 @@ export declare interface AnimationStaggerMetadata extends AnimationMetadata {
|
|
|
704
709
|
|
|
705
710
|
/**
|
|
706
711
|
* Encapsulates an animation state by associating a state name with a set of CSS styles.
|
|
707
|
-
* Instantiated and returned by the `state()` function.
|
|
712
|
+
* Instantiated and returned by the [`state()`](api/animations/state) function.
|
|
708
713
|
*
|
|
709
714
|
* @publicApi
|
|
710
715
|
*/
|
|
@@ -936,7 +941,9 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
|
|
|
936
941
|
*
|
|
937
942
|
* @param selector The element to query, or a set of elements that contain Angular-specific
|
|
938
943
|
* characteristics, specified with one or more of the following tokens.
|
|
939
|
-
* - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements
|
|
944
|
+
* - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
|
|
945
|
+
* all elements can be queried via these tokens, see
|
|
946
|
+
* [Entering and Leaving Elements](#entering-and-leaving-elements))
|
|
940
947
|
* - `query(":animating")` : Query all currently animating elements.
|
|
941
948
|
* - `query("@triggerName")` : Query elements that contain an animation trigger.
|
|
942
949
|
* - `query("@*")` : Query all elements that contain an animation triggers.
|
|
@@ -949,6 +956,9 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
|
|
|
949
956
|
* @return An object that encapsulates the query data.
|
|
950
957
|
*
|
|
951
958
|
* @usageNotes
|
|
959
|
+
*
|
|
960
|
+
* ### Multiple Tokens
|
|
961
|
+
*
|
|
952
962
|
* Tokens can be merged into a combined query selector string. For example:
|
|
953
963
|
*
|
|
954
964
|
* ```typescript
|
|
@@ -976,6 +986,26 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
|
|
|
976
986
|
* ], { optional: true })
|
|
977
987
|
* ```
|
|
978
988
|
*
|
|
989
|
+
* ### Entering and Leaving Elements
|
|
990
|
+
*
|
|
991
|
+
* Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
|
|
992
|
+
* that can are those that Angular assumes can enter/leave based on their own logic
|
|
993
|
+
* (if their insertion/removal is simply a consequence of that of their parent they
|
|
994
|
+
* should be queried via a different token in their parent's `:enter`/`:leave` transitions).
|
|
995
|
+
*
|
|
996
|
+
* The only elements Angular assumes can enter/leave on their own logic (thus the only
|
|
997
|
+
* ones that can be queried via the `:enter` and `:leave` tokens) are:
|
|
998
|
+
* - Those inserted dynamically (via `ViewContainerRef`)
|
|
999
|
+
* - Those that have a structural directive (which, under the hood, are a subset of the above ones)
|
|
1000
|
+
*
|
|
1001
|
+
* <div class="alert is-helpful">
|
|
1002
|
+
*
|
|
1003
|
+
* Note that elements will be successfully queried via `:enter`/`:leave` even if their
|
|
1004
|
+
* insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
|
|
1005
|
+
* directive (e.g. they enter/exit alongside their parent).
|
|
1006
|
+
*
|
|
1007
|
+
* </div>
|
|
1008
|
+
*
|
|
979
1009
|
* ### Usage Example
|
|
980
1010
|
*
|
|
981
1011
|
* The following example queries for inner elements and animates them
|
|
@@ -1173,8 +1203,8 @@ export declare function state(name: string, styles: AnimationStyleMetadata, opti
|
|
|
1173
1203
|
|
|
1174
1204
|
/**
|
|
1175
1205
|
* Declares a key/value object containing CSS properties/styles that
|
|
1176
|
-
* can then be used for an animation `state
|
|
1177
|
-
|
|
1206
|
+
* can then be used for an animation [`state`](api/animations/state), within an animation
|
|
1207
|
+
*`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
|
|
1178
1208
|
*
|
|
1179
1209
|
* @param tokens A set of CSS styles or HTML styles associated with an animation state.
|
|
1180
1210
|
* The value can be any of the following:
|
|
@@ -1217,170 +1247,148 @@ export declare function style(tokens: '*' | {
|
|
|
1217
1247
|
}>): AnimationStyleMetadata;
|
|
1218
1248
|
|
|
1219
1249
|
/**
|
|
1220
|
-
* Declares an animation transition
|
|
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 asterisk (*) 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
|
+
* Declares an animation transition which is played when a certain specified condition is met.
|
|
1250
1251
|
*
|
|
1251
|
-
* @
|
|
1252
|
-
*
|
|
1252
|
+
* @param stateChangeExpr A string with a specific format or a function that specifies when the
|
|
1253
|
+
* animation transition should occur (see [State Change Expression](#state-change-expression)).
|
|
1253
1254
|
*
|
|
1254
|
-
*
|
|
1255
|
-
* <!-- somewhere inside of my-component-tpl.html -->
|
|
1256
|
-
* <div [@myAnimationTrigger]="myStatusExp">...</div>
|
|
1257
|
-
* ```
|
|
1255
|
+
* @param steps One or more animation objects that represent the animation's instructions.
|
|
1258
1256
|
*
|
|
1259
|
-
*
|
|
1260
|
-
*
|
|
1257
|
+
* @param options An options object that can be used to specify a delay for the animation or provide
|
|
1258
|
+
* custom parameters for it.
|
|
1261
1259
|
*
|
|
1262
|
-
*
|
|
1263
|
-
* trigger("myAnimationTrigger", [
|
|
1264
|
-
* // define states
|
|
1265
|
-
* state("on", style({ background: "green" })),
|
|
1266
|
-
* state("off", style({ background: "grey" })),
|
|
1267
|
-
* ...]
|
|
1268
|
-
* ```
|
|
1260
|
+
* @returns An object that encapsulates the transition data.
|
|
1269
1261
|
*
|
|
1270
|
-
*
|
|
1271
|
-
* or a `transition()` call, execution does not continue to the next instruction
|
|
1272
|
-
* until each of the inner animation steps have completed.
|
|
1262
|
+
* @usageNotes
|
|
1273
1263
|
*
|
|
1274
|
-
* ###
|
|
1264
|
+
* ### State Change Expression
|
|
1265
|
+
*
|
|
1266
|
+
* The State Change Expression instructs Angular when to run the transition's animations, it can
|
|
1267
|
+
*either be
|
|
1268
|
+
* - a string with a specific syntax
|
|
1269
|
+
* - or a function that compares the previous and current state (value of the expression bound to
|
|
1270
|
+
* the element's trigger) and returns `true` if the transition should occur or `false` otherwise
|
|
1271
|
+
*
|
|
1272
|
+
* The string format can be:
|
|
1273
|
+
* - `fromState => toState`, which indicates that the transition's animations should occur then the
|
|
1274
|
+
* expression bound to the trigger's element goes from `fromState` to `toState`
|
|
1275
|
+
*
|
|
1276
|
+
* _Example:_
|
|
1277
|
+
* ```typescript
|
|
1278
|
+
* transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
|
|
1279
|
+
* ```
|
|
1280
|
+
*
|
|
1281
|
+
* - `fromState <=> toState`, which indicates that the transition's animations should occur then
|
|
1282
|
+
* the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
|
|
1283
|
+
*
|
|
1284
|
+
* _Example:_
|
|
1285
|
+
* ```typescript
|
|
1286
|
+
* transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
|
|
1287
|
+
* ```
|
|
1288
|
+
*
|
|
1289
|
+
* - `:enter`/`:leave`, which indicates that the transition's animations should occur when the
|
|
1290
|
+
* element enters or exists the DOM
|
|
1291
|
+
*
|
|
1292
|
+
* _Example:_
|
|
1293
|
+
* ```typescript
|
|
1294
|
+
* transition(':enter', [
|
|
1295
|
+
* style({ opacity: 0 }),
|
|
1296
|
+
* animate('500ms', style({ opacity: 1 }))
|
|
1297
|
+
* ])
|
|
1298
|
+
* ```
|
|
1299
|
+
*
|
|
1300
|
+
* - `:increment`/`:decrement`, which indicates that the transition's animations should occur when
|
|
1301
|
+
* the numerical expression bound to the trigger's element has increased in value or decreased
|
|
1302
|
+
*
|
|
1303
|
+
* _Example:_
|
|
1304
|
+
* ```typescript
|
|
1305
|
+
* transition(':increment', query('@counter', animateChild()))
|
|
1306
|
+
* ```
|
|
1307
|
+
*
|
|
1308
|
+
* - a sequence of any of the above divided by commas, which indicates that transition's animations
|
|
1309
|
+
* should occur whenever one of the state change expressions matches
|
|
1310
|
+
*
|
|
1311
|
+
* _Example:_
|
|
1312
|
+
* ```typescript
|
|
1313
|
+
* transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
|
|
1314
|
+
* style({ transform: 'scale(1)', offset: 0}),
|
|
1315
|
+
* style({ transform: 'scale(1.1)', offset: 0.7}),
|
|
1316
|
+
* style({ transform: 'scale(1)', offset: 1})
|
|
1317
|
+
* ]))),
|
|
1318
|
+
* ```
|
|
1319
|
+
*
|
|
1320
|
+
* Also note that in such context:
|
|
1321
|
+
* - `void` can be used to indicate the absence of the element
|
|
1322
|
+
* - asterisks can be used as wildcards that match any state
|
|
1323
|
+
* - (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is
|
|
1324
|
+
* equivalent to `:leave`)
|
|
1325
|
+
* - `true` and `false` also match expression values of `1` and `0` respectively (but do not match
|
|
1326
|
+
* _truthy_ and _falsy_ values)
|
|
1327
|
+
*
|
|
1328
|
+
* <div class="alert is-helpful">
|
|
1329
|
+
*
|
|
1330
|
+
* Be careful about entering end leaving elements as their transitions present a common
|
|
1331
|
+
* pitfall for developers.
|
|
1332
|
+
*
|
|
1333
|
+
* Note that when an element with a trigger enters the DOM its `:enter` transition always
|
|
1334
|
+
* gets executed, but its `:leave` transition will not be executed if the element is removed
|
|
1335
|
+
* alongside its parent (as it will be removed "without warning" before its transition has
|
|
1336
|
+
* a chance to be executed, the only way that such transition can occur is if the element
|
|
1337
|
+
* is exiting the DOM on its own).
|
|
1275
1338
|
*
|
|
1276
|
-
* The following examples define transitions between the two defined states (and default states),
|
|
1277
|
-
* using various options:
|
|
1278
1339
|
*
|
|
1279
|
-
*
|
|
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
|
-
* ```
|
|
1340
|
+
* </div>
|
|
1288
1341
|
*
|
|
1289
|
-
* ###
|
|
1342
|
+
* ### Animating to a Final State
|
|
1290
1343
|
*
|
|
1291
|
-
*
|
|
1292
|
-
*
|
|
1344
|
+
* If the final step in a transition is a call to `animate()` that uses a timing value
|
|
1345
|
+
* with no `style` data, that step is automatically considered the final animation arc,
|
|
1346
|
+
* for the element to reach the final state, in such case Angular automatically adds or removes
|
|
1347
|
+
* CSS styles to ensure that the element is in the correct final state.
|
|
1293
1348
|
*
|
|
1294
|
-
* ```typescript
|
|
1295
|
-
* transition("void => *", [
|
|
1296
|
-
* style({ opacity: 0 }),
|
|
1297
|
-
* animate(500)
|
|
1298
|
-
* ])
|
|
1299
|
-
* ```
|
|
1300
1349
|
*
|
|
1301
|
-
*
|
|
1350
|
+
* ### Usage Examples
|
|
1302
1351
|
*
|
|
1303
|
-
*
|
|
1352
|
+
* - Transition animations applied based on
|
|
1353
|
+
* the trigger's expression value
|
|
1304
1354
|
*
|
|
1305
|
-
*
|
|
1355
|
+
* ```HTML
|
|
1356
|
+
* <div [@myAnimationTrigger]="myStatusExp">
|
|
1357
|
+
* ...
|
|
1358
|
+
* </div>
|
|
1359
|
+
* ```
|
|
1306
1360
|
*
|
|
1307
|
-
*
|
|
1308
|
-
*
|
|
1309
|
-
*
|
|
1310
|
-
*
|
|
1311
|
-
*
|
|
1312
|
-
* transition(":leave", [
|
|
1313
|
-
* animate(500, style({ opacity: 0 }))
|
|
1361
|
+
* ```typescript
|
|
1362
|
+
* trigger("myAnimationTrigger", [
|
|
1363
|
+
* ..., // states
|
|
1364
|
+
* transition("on => off, open => closed", animate(500)),
|
|
1365
|
+
* transition("* <=> error", query('.indicator', animateChild()))
|
|
1314
1366
|
* ])
|
|
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.
|
|
1367
|
+
* ```
|
|
1360
1368
|
*
|
|
1361
|
-
*
|
|
1362
|
-
*
|
|
1369
|
+
* - Transition animations applied based on custom logic dependent
|
|
1370
|
+
* on the trigger's expression value and provided parameters
|
|
1363
1371
|
*
|
|
1364
|
-
*
|
|
1365
|
-
*
|
|
1366
|
-
*
|
|
1367
|
-
*
|
|
1368
|
-
*
|
|
1369
|
-
*
|
|
1370
|
-
*
|
|
1371
|
-
*
|
|
1372
|
-
*
|
|
1373
|
-
*
|
|
1374
|
-
*
|
|
1375
|
-
* //
|
|
1376
|
-
*
|
|
1377
|
-
*
|
|
1378
|
-
*
|
|
1379
|
-
*
|
|
1380
|
-
*
|
|
1381
|
-
*
|
|
1382
|
-
*
|
|
1383
|
-
*
|
|
1372
|
+
* ```HTML
|
|
1373
|
+
* <div [@myAnimationTrigger]="{
|
|
1374
|
+
* value: stepName,
|
|
1375
|
+
* params: { target: currentTarget }
|
|
1376
|
+
* }">
|
|
1377
|
+
* ...
|
|
1378
|
+
* </div>
|
|
1379
|
+
* ```
|
|
1380
|
+
*
|
|
1381
|
+
* ```typescript
|
|
1382
|
+
* trigger("myAnimationTrigger", [
|
|
1383
|
+
* ..., // states
|
|
1384
|
+
* transition(
|
|
1385
|
+
* (fromState, toState, _element, params) =>
|
|
1386
|
+
* ['firststep', 'laststep'].includes(fromState.toLowerCase())
|
|
1387
|
+
* && toState === params?.['target'],
|
|
1388
|
+
* animate('1s')
|
|
1389
|
+
* )
|
|
1390
|
+
* ])
|
|
1391
|
+
* ```
|
|
1384
1392
|
*
|
|
1385
1393
|
* @publicApi
|
|
1386
1394
|
**/
|
|
@@ -1389,13 +1397,13 @@ export declare function transition(stateChangeExpr: string | ((fromState: string
|
|
|
1389
1397
|
}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
|
|
1390
1398
|
|
|
1391
1399
|
/**
|
|
1392
|
-
* Creates a named animation trigger, containing a list of `state()`
|
|
1400
|
+
* Creates a named animation trigger, containing a list of [`state()`](api/animations/state)
|
|
1393
1401
|
* and `transition()` entries to be evaluated when the expression
|
|
1394
1402
|
* bound to the trigger changes.
|
|
1395
1403
|
*
|
|
1396
1404
|
* @param name An identifying string.
|
|
1397
|
-
* @param definitions An animation definition object, containing an array of
|
|
1398
|
-
* and `transition()` declarations.
|
|
1405
|
+
* @param definitions An animation definition object, containing an array of
|
|
1406
|
+
* [`state()`](api/animations/state) and `transition()` declarations.
|
|
1399
1407
|
*
|
|
1400
1408
|
* @return An object that encapsulates the trigger data.
|
|
1401
1409
|
*
|
package/browser/browser.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v13.1.
|
|
3
|
-
* (c) 2010-
|
|
2
|
+
* @license Angular v13.1.3
|
|
3
|
+
* (c) 2010-2022 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -17,6 +17,9 @@ import { ɵStyleData } from '@angular/animations';
|
|
|
17
17
|
export declare abstract class AnimationDriver {
|
|
18
18
|
static NOOP: AnimationDriver;
|
|
19
19
|
abstract validateStyleProperty(prop: string): boolean;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated No longer in use. Will be removed.
|
|
22
|
+
*/
|
|
20
23
|
abstract matchesElement(element: any, selector: string): boolean;
|
|
21
24
|
abstract containsElement(elm1: any, elm2: any): boolean;
|
|
22
25
|
abstract query(element: any, selector: string, multi: boolean): any[];
|
|
@@ -72,7 +75,7 @@ declare interface DOMAnimation {
|
|
|
72
75
|
|
|
73
76
|
declare class ElementInstructionMap {
|
|
74
77
|
private _map;
|
|
75
|
-
|
|
78
|
+
get(element: any): AnimationTimelineInstruction[];
|
|
76
79
|
append(element: any, instructions: AnimationTimelineInstruction[]): void;
|
|
77
80
|
has(element: any): boolean;
|
|
78
81
|
clear(): void;
|
|
@@ -150,7 +153,7 @@ export declare const ɵcontainsElement: (elm1: any, elm2: any) => boolean;
|
|
|
150
153
|
export declare class ɵCssKeyframesDriver implements AnimationDriver {
|
|
151
154
|
private _count;
|
|
152
155
|
validateStyleProperty(prop: string): boolean;
|
|
153
|
-
matchesElement(
|
|
156
|
+
matchesElement(_element: any, _selector: string): boolean;
|
|
154
157
|
containsElement(elm1: any, elm2: any): boolean;
|
|
155
158
|
query(element: any, selector: string, multi: boolean): any[];
|
|
156
159
|
computeStyle(element: any, prop: string, defaultValue?: string): string;
|
|
@@ -207,14 +210,12 @@ export declare class ɵCssKeyframesPlayer implements AnimationPlayer {
|
|
|
207
210
|
|
|
208
211
|
export declare const ɵinvokeQuery: (element: any, selector: string, multi: boolean) => any[];
|
|
209
212
|
|
|
210
|
-
export declare const ɵmatchesElement: (element: any, selector: string) => boolean;
|
|
211
|
-
|
|
212
213
|
/**
|
|
213
214
|
* @publicApi
|
|
214
215
|
*/
|
|
215
216
|
export declare class ɵNoopAnimationDriver implements AnimationDriver {
|
|
216
217
|
validateStyleProperty(prop: string): boolean;
|
|
217
|
-
matchesElement(
|
|
218
|
+
matchesElement(_element: any, _selector: string): boolean;
|
|
218
219
|
containsElement(elm1: any, elm2: any): boolean;
|
|
219
220
|
query(element: any, selector: string, multi: boolean): any[];
|
|
220
221
|
computeStyle(element: any, prop: string, defaultValue?: string): string;
|
|
@@ -241,7 +242,7 @@ export declare class ɵWebAnimationsDriver implements AnimationDriver {
|
|
|
241
242
|
private _isNativeImpl;
|
|
242
243
|
private _cssKeyframesDriver;
|
|
243
244
|
validateStyleProperty(prop: string): boolean;
|
|
244
|
-
matchesElement(
|
|
245
|
+
matchesElement(_element: any, _selector: string): boolean;
|
|
245
246
|
containsElement(elm1: any, elm2: any): boolean;
|
|
246
247
|
query(element: any, selector: string, multi: boolean): any[];
|
|
247
248
|
computeStyle(element: any, prop: string, defaultValue?: string): string;
|
|
@@ -267,7 +268,7 @@ export declare class ɵWebAnimationsPlayer implements AnimationPlayer {
|
|
|
267
268
|
private _finished;
|
|
268
269
|
private _started;
|
|
269
270
|
private _destroyed;
|
|
270
|
-
private _finalKeyframe
|
|
271
|
+
private _finalKeyframe?;
|
|
271
272
|
readonly domPlayer: DOMAnimation;
|
|
272
273
|
time: number;
|
|
273
274
|
parentPlayer: AnimationPlayer | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v13.1.
|
|
3
|
-
* (c) 2010-
|
|
2
|
+
* @license Angular v13.1.3
|
|
3
|
+
* (c) 2010-2022 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -15,7 +15,7 @@ import { ɵStyleData } from '@angular/animations';
|
|
|
15
15
|
export declare class MockAnimationDriver implements AnimationDriver {
|
|
16
16
|
static log: AnimationPlayer[];
|
|
17
17
|
validateStyleProperty(prop: string): boolean;
|
|
18
|
-
matchesElement(
|
|
18
|
+
matchesElement(_element: any, _selector: string): boolean;
|
|
19
19
|
containsElement(elm1: any, elm2: any): boolean;
|
|
20
20
|
query(element: any, selector: string, multi: boolean): any[];
|
|
21
21
|
computeStyle(element: any, prop: string, defaultValue?: string): string;
|
|
@@ -28,4 +28,4 @@ export class Animation {
|
|
|
28
28
|
return result;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5pbWF0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYW5pbWF0aW9ucy9icm93c2VyL3NyYy9kc2wvYW5pbWF0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVBLE9BQU8sRUFBQyxlQUFlLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBQyxNQUFNLFNBQVMsQ0FBQztBQUcxRSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUMxRCxPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUVyRSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVoRSxNQUFNLE9BQU8sU0FBUztJQUVwQixZQUFvQixPQUF3QixFQUFFLEtBQTRDO1FBQXRFLFlBQU8sR0FBUCxPQUFPLENBQWlCO1FBQzFDLE1BQU0sTUFBTSxHQUFhLEVBQUUsQ0FBQztRQUM1QixNQUFNLEdBQUcsR0FBRyxpQkFBaUIsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ3RELElBQUksTUFBTSxDQUFDLE1BQU0sRUFBRTtZQUNqQixNQUFNLFlBQVksR0FBRyxpQ0FBaUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO1lBQzFFLE1BQU0sSUFBSSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7U0FDL0I7UUFDRCxJQUFJLENBQUMsYUFBYSxHQUFHLEdBQUcsQ0FBQztJQUMzQixDQUFDO0lBRUQsY0FBYyxDQUNWLE9BQVksRUFBRSxjQUF1QyxFQUNyRCxpQkFBMEMsRUFBRSxPQUF5QixFQUNyRSxlQUF1QztRQUN6QyxNQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztZQUNyQixjQUFjLENBQUM7UUFDekUsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDO1lBQ3hCLGlCQUFpQixDQUFDO1FBQzlFLE1BQU0sTUFBTSxHQUFRLEVBQUUsQ0FBQztRQUN2QixlQUFlLEdBQUcsZUFBZSxJQUFJLElBQUkscUJBQXFCLEVBQUUsQ0FBQztRQUNqRSxNQUFNLE1BQU0sR0FBRyx1QkFBdUIsQ0FDbEMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBQWEsRUFBRSxlQUFlLEVBQUUsZUFBZSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQ3hGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDdEMsSUFBSSxNQUFNLENBQUMsTUFBTSxFQUFFO1lBQ2pCLE1BQU0sWUFBWSxHQUFHLCtCQUErQixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDeEUsTUFBTSxJQUFJLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQztTQUMvQjtRQUNELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuaW1wb3J0IHtBbmltYXRpb25NZXRhZGF0YSwgQW5pbWF0aW9uTWV0YWRhdGFUeXBlLCBBbmltYXRpb25PcHRpb25zLCDJtVN0eWxlRGF0YX0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbmltcG9ydCB7QW5pbWF0aW9uRHJpdmVyfSBmcm9tICcuLi9yZW5kZXIvYW5pbWF0aW9uX2RyaXZlcic7XG5pbXBvcnQge0VOVEVSX0NMQVNTTkFNRSwgTEVBVkVfQ0xBU1NOQU1FLCBub3JtYWxpemVTdHlsZXN9IGZyb20gJy4uL3V0aWwnO1xuXG5pbXBvcnQge0FzdH0gZnJvbSAnLi9hbmltYXRpb25fYXN0JztcbmltcG9ydCB7YnVpbGRBbmltYXRpb25Bc3R9IGZyb20gJy4vYW5pbWF0aW9uX2FzdF9idWlsZGVyJztcbmltcG9ydCB7YnVpbGRBbmltYXRpb25UaW1lbGluZXN9IGZyb20gJy4vYW5pbWF0aW9uX3RpbWVsaW5lX2J1aWxkZXInO1xuaW1wb3J0IHtBbmltYXRpb25UaW1lbGluZUluc3RydWN0aW9ufSBmcm9tICcuL2FuaW1hdGlvbl90aW1lbGluZV9pbnN0cnVjdGlvbic7XG5pbXBvcnQge0VsZW1lbnRJbnN0cnVjdGlvbk1hcH0gZnJvbSAnLi9lbGVtZW50X2luc3RydWN0aW9uX21hcCc7XG5cbmV4cG9ydCBjbGFzcyBBbmltYXRpb24ge1xuICBwcml2YXRlIF9hbmltYXRpb25Bc3Q6IEFzdDxBbmltYXRpb25NZXRhZGF0YVR5cGU+O1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9kcml2ZXI6IEFuaW1hdGlvbkRyaXZlciwgaW5wdXQ6IEFuaW1hdGlvbk1ldGFkYXRhfEFuaW1hdGlvbk1ldGFkYXRhW10pIHtcbiAgICBjb25zdCBlcnJvcnM6IHN0cmluZ1tdID0gW107XG4gICAgY29uc3QgYXN0ID0gYnVpbGRBbmltYXRpb25Bc3QoX2RyaXZlciwgaW5wdXQsIGVycm9ycyk7XG4gICAgaWYgKGVycm9ycy5sZW5ndGgpIHtcbiAgICAgIGNvbnN0IGVycm9yTWVzc2FnZSA9IGBhbmltYXRpb24gdmFsaWRhdGlvbiBmYWlsZWQ6XFxuJHtlcnJvcnMuam9pbignXFxuJyl9YDtcbiAgICAgIHRocm93IG5ldyBFcnJvcihlcnJvck1lc3NhZ2UpO1xuICAgIH1cbiAgICB0aGlzLl9hbmltYXRpb25Bc3QgPSBhc3Q7XG4gIH1cblxuICBidWlsZFRpbWVsaW5lcyhcbiAgICAgIGVsZW1lbnQ6IGFueSwgc3RhcnRpbmdTdHlsZXM6IMm1U3R5bGVEYXRhfMm1U3R5bGVEYXRhW10sXG4gICAgICBkZXN0aW5hdGlvblN0eWxlczogybVTdHlsZURhdGF8ybVTdHlsZURhdGFbXSwgb3B0aW9uczogQW5pbWF0aW9uT3B0aW9ucyxcbiAgICAgIHN1Ykluc3RydWN0aW9ucz86IEVsZW1lbnRJbnN0cnVjdGlvbk1hcCk6IEFuaW1hdGlvblRpbWVsaW5lSW5zdHJ1Y3Rpb25bXSB7XG4gICAgY29uc3Qgc3RhcnQgPSBBcnJheS5pc0FycmF5KHN0YXJ0aW5nU3R5bGVzKSA/IG5vcm1hbGl6ZVN0eWxlcyhzdGFydGluZ1N0eWxlcykgOlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ybVTdHlsZURhdGE+c3RhcnRpbmdTdHlsZXM7XG4gICAgY29uc3QgZGVzdCA9IEFycmF5LmlzQXJyYXkoZGVzdGluYXRpb25TdHlsZXMpID8gbm9ybWFsaXplU3R5bGVzKGRlc3RpbmF0aW9uU3R5bGVzKSA6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPMm1U3R5bGVEYXRhPmRlc3RpbmF0aW9uU3R5bGVzO1xuICAgIGNvbnN0IGVycm9yczogYW55ID0gW107XG4gICAgc3ViSW5zdHJ1Y3Rpb25zID0gc3ViSW5zdHJ1Y3Rpb25zIHx8IG5ldyBFbGVtZW50SW5zdHJ1Y3Rpb25NYXAoKTtcbiAgICBjb25zdCByZXN1bHQgPSBidWlsZEFuaW1hdGlvblRpbWVsaW5lcyhcbiAgICAgICAgdGhpcy5fZHJpdmVyLCBlbGVtZW50LCB0aGlzLl9hbmltYXRpb25Bc3QsIEVOVEVSX0NMQVNTTkFNRSwgTEVBVkVfQ0xBU1NOQU1FLCBzdGFydCwgZGVzdCxcbiAgICAgICAgb3B0aW9ucywgc3ViSW5zdHJ1Y3Rpb25zLCBlcnJvcnMpO1xuICAgIGlmIChlcnJvcnMubGVuZ3RoKSB7XG4gICAgICBjb25zdCBlcnJvck1lc3NhZ2UgPSBgYW5pbWF0aW9uIGJ1aWxkaW5nIGZhaWxlZDpcXG4ke2Vycm9ycy5qb2luKCdcXG4nKX1gO1xuICAgICAgdGhyb3cgbmV3IEVycm9yKGVycm9yTWVzc2FnZSk7XG4gICAgfVxuICAgIHJldHVybiByZXN1bHQ7XG4gIH1cbn1cbiJdfQ==
|