@angular/animations 19.0.2 → 19.0.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/browser/index.d.ts +1 -1
- package/browser/testing/index.d.ts +1 -1
- package/fesm2022/animations.mjs +31 -31
- package/fesm2022/animations.mjs.map +1 -1
- package/fesm2022/browser/testing.mjs +1 -1
- package/fesm2022/browser.mjs +7 -7
- package/fesm2022/browser.mjs.map +1 -1
- package/index.d.ts +26 -26
- package/package.json +2 -2
package/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* @license Angular v19.0.
|
2
|
+
* @license Angular v19.0.3
|
3
3
|
* (c) 2010-2024 Google LLC. https://angular.io/
|
4
4
|
* License: MIT
|
5
5
|
*/
|
@@ -51,12 +51,12 @@ import { RendererFactory2 } from '@angular/core';
|
|
51
51
|
* **Style examples**
|
52
52
|
*
|
53
53
|
* The following example calls `style()` to set a single CSS style.
|
54
|
-
* ```
|
54
|
+
* ```ts
|
55
55
|
* animate(500, style({ background: "red" }))
|
56
56
|
* ```
|
57
57
|
* The following example calls `keyframes()` to set a CSS style
|
58
58
|
* to different values for successive keyframes.
|
59
|
-
* ```
|
59
|
+
* ```ts
|
60
60
|
* animate(500, keyframes(
|
61
61
|
* [
|
62
62
|
* style({ background: "blue" }),
|
@@ -146,7 +146,7 @@ export declare type AnimateTimings = {
|
|
146
146
|
* The following example defines a reusable animation, providing some default parameter
|
147
147
|
* values.
|
148
148
|
*
|
149
|
-
* ```
|
149
|
+
* ```ts
|
150
150
|
* var fadeAnimation = animation([
|
151
151
|
* style({ opacity: '{{ start }}' }),
|
152
152
|
* animate('{{ time }}',
|
@@ -290,7 +290,7 @@ export declare abstract class AnimationBuilder {
|
|
290
290
|
* An instance of this class is returned as an event parameter when an animation
|
291
291
|
* callback is captured for an animation either during the start or done phase.
|
292
292
|
*
|
293
|
-
* ```
|
293
|
+
* ```ts
|
294
294
|
* @Component({
|
295
295
|
* host: {
|
296
296
|
* '[@myAnimationTrigger]': 'someExpression',
|
@@ -831,7 +831,7 @@ export declare const AUTO_STYLE = "*";
|
|
831
831
|
* `keyframes()`, or use `animate()` calls with a delay value.
|
832
832
|
* For example:
|
833
833
|
*
|
834
|
-
* ```
|
834
|
+
* ```ts
|
835
835
|
* group([
|
836
836
|
* animate("1s", style({ background: "black" })),
|
837
837
|
* animate("2s", style({ color: "white" }))
|
@@ -877,7 +877,7 @@ export declare function group(steps: AnimationMetadata[], options?: AnimationOpt
|
|
877
877
|
* when each `backgroundColor` value is applied. The color is red at the start, and changes to
|
878
878
|
* blue when 20% of the total time has elapsed.
|
879
879
|
*
|
880
|
-
* ```
|
880
|
+
* ```ts
|
881
881
|
* // the provided offset values
|
882
882
|
* animate("5s", keyframes([
|
883
883
|
* style({ backgroundColor: "red", offset: 0 }),
|
@@ -890,7 +890,7 @@ export declare function group(steps: AnimationMetadata[], options?: AnimationOpt
|
|
890
890
|
* If there are no `offset` values specified in the style entries, the offsets
|
891
891
|
* are calculated automatically.
|
892
892
|
*
|
893
|
-
* ```
|
893
|
+
* ```ts
|
894
894
|
* animate("5s", keyframes([
|
895
895
|
* style({ backgroundColor: "red" }) // offset = 0
|
896
896
|
* style({ backgroundColor: "blue" }) // offset = 0.33
|
@@ -969,7 +969,7 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
|
|
969
969
|
*
|
970
970
|
* Tokens can be merged into a combined query selector string. For example:
|
971
971
|
*
|
972
|
-
* ```
|
972
|
+
* ```ts
|
973
973
|
* query(':self, .record:enter, .record:leave, @subTrigger', [...])
|
974
974
|
* ```
|
975
975
|
*
|
@@ -1027,7 +1027,7 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
|
|
1027
1027
|
* The following example queries for inner elements and animates them
|
1028
1028
|
* individually using `animate()`.
|
1029
1029
|
*
|
1030
|
-
* ```
|
1030
|
+
* ```angular-ts
|
1031
1031
|
* @Component({
|
1032
1032
|
* selector: 'inner',
|
1033
1033
|
* template: `
|
@@ -1073,7 +1073,7 @@ export declare function query(selector: string, animation: AnimationMetadata | A
|
|
1073
1073
|
* - Steps defined by `animate()` calls apply the styling data over time
|
1074
1074
|
* as specified by the timing data.
|
1075
1075
|
*
|
1076
|
-
* ```
|
1076
|
+
* ```ts
|
1077
1077
|
* sequence([
|
1078
1078
|
* style({ opacity: 0 }),
|
1079
1079
|
* animate("1s", style({ opacity: 1 }))
|
@@ -1131,7 +1131,7 @@ export declare function sequence(steps: AnimationMetadata[], options?: Animation
|
|
1131
1131
|
*
|
1132
1132
|
* Here is the component code:
|
1133
1133
|
*
|
1134
|
-
* ```
|
1134
|
+
* ```ts
|
1135
1135
|
* import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
|
1136
1136
|
* @Component({
|
1137
1137
|
* templateUrl: 'list.component.html',
|
@@ -1160,7 +1160,7 @@ export declare function sequence(steps: AnimationMetadata[], options?: Animation
|
|
1160
1160
|
*
|
1161
1161
|
* Here is the animation trigger code:
|
1162
1162
|
*
|
1163
|
-
* ```
|
1163
|
+
* ```ts
|
1164
1164
|
* trigger('listAnimation', [
|
1165
1165
|
* transition('* => *', [ // each time the binding value changes
|
1166
1166
|
* query(':leave', [
|
@@ -1238,7 +1238,7 @@ export declare function state(name: string, styles: AnimationStyleMetadata, opti
|
|
1238
1238
|
* The following examples create animation styles that collect a set of
|
1239
1239
|
* CSS property values:
|
1240
1240
|
*
|
1241
|
-
* ```
|
1241
|
+
* ```ts
|
1242
1242
|
* // string values for CSS properties
|
1243
1243
|
* style({ background: "red", color: "blue" })
|
1244
1244
|
*
|
@@ -1249,7 +1249,7 @@ export declare function state(name: string, styles: AnimationStyleMetadata, opti
|
|
1249
1249
|
* The following example uses auto-styling to allow an element to animate from
|
1250
1250
|
* a height of 0 up to its full height:
|
1251
1251
|
*
|
1252
|
-
* ```
|
1252
|
+
* ```ts
|
1253
1253
|
* style({ height: 0 }),
|
1254
1254
|
* animate("1s", style({ height: "*" }))
|
1255
1255
|
* ```
|
@@ -1290,7 +1290,7 @@ export declare function style(tokens: '*' | {
|
|
1290
1290
|
* expression bound to the trigger's element goes from `fromState` to `toState`
|
1291
1291
|
*
|
1292
1292
|
* _Example:_
|
1293
|
-
* ```
|
1293
|
+
* ```ts
|
1294
1294
|
* transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
|
1295
1295
|
* ```
|
1296
1296
|
*
|
@@ -1298,7 +1298,7 @@ export declare function style(tokens: '*' | {
|
|
1298
1298
|
* the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
|
1299
1299
|
*
|
1300
1300
|
* _Example:_
|
1301
|
-
* ```
|
1301
|
+
* ```ts
|
1302
1302
|
* transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
|
1303
1303
|
* ```
|
1304
1304
|
*
|
@@ -1306,7 +1306,7 @@ export declare function style(tokens: '*' | {
|
|
1306
1306
|
* element enters or exists the DOM
|
1307
1307
|
*
|
1308
1308
|
* _Example:_
|
1309
|
-
* ```
|
1309
|
+
* ```ts
|
1310
1310
|
* transition(':enter', [
|
1311
1311
|
* style({ opacity: 0 }),
|
1312
1312
|
* animate('500ms', style({ opacity: 1 }))
|
@@ -1317,7 +1317,7 @@ export declare function style(tokens: '*' | {
|
|
1317
1317
|
* the numerical expression bound to the trigger's element has increased in value or decreased
|
1318
1318
|
*
|
1319
1319
|
* _Example:_
|
1320
|
-
* ```
|
1320
|
+
* ```ts
|
1321
1321
|
* transition(':increment', query('@counter', animateChild()))
|
1322
1322
|
* ```
|
1323
1323
|
*
|
@@ -1325,7 +1325,7 @@ export declare function style(tokens: '*' | {
|
|
1325
1325
|
* should occur whenever one of the state change expressions matches
|
1326
1326
|
*
|
1327
1327
|
* _Example:_
|
1328
|
-
* ```
|
1328
|
+
* ```ts
|
1329
1329
|
* transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
|
1330
1330
|
* style({ transform: 'scale(1)', offset: 0}),
|
1331
1331
|
* style({ transform: 'scale(1.1)', offset: 0.7}),
|
@@ -1374,7 +1374,7 @@ export declare function style(tokens: '*' | {
|
|
1374
1374
|
* </div>
|
1375
1375
|
* ```
|
1376
1376
|
*
|
1377
|
-
* ```
|
1377
|
+
* ```ts
|
1378
1378
|
* trigger("myAnimationTrigger", [
|
1379
1379
|
* ..., // states
|
1380
1380
|
* transition("on => off, open => closed", animate(500)),
|
@@ -1394,7 +1394,7 @@ export declare function style(tokens: '*' | {
|
|
1394
1394
|
* </div>
|
1395
1395
|
* ```
|
1396
1396
|
*
|
1397
|
-
* ```
|
1397
|
+
* ```ts
|
1398
1398
|
* trigger("myAnimationTrigger", [
|
1399
1399
|
* ..., // states
|
1400
1400
|
* transition(
|
@@ -1441,7 +1441,7 @@ export declare function transition(stateChangeExpr: string | ((fromState: string
|
|
1441
1441
|
* The provided animation value is expected to be an array consisting of state and
|
1442
1442
|
* transition declarations.
|
1443
1443
|
*
|
1444
|
-
* ```
|
1444
|
+
* ```ts
|
1445
1445
|
* @Component({
|
1446
1446
|
* selector: "my-component",
|
1447
1447
|
* templateUrl: "my-component-tpl.html",
|
@@ -1471,7 +1471,7 @@ export declare function transition(stateChangeExpr: string | ((fromState: string
|
|
1471
1471
|
* The `transition` animation method also supports reading an inline function which can decide
|
1472
1472
|
* if its associated animation should be run.
|
1473
1473
|
*
|
1474
|
-
* ```
|
1474
|
+
* ```ts
|
1475
1475
|
* // this method is run each time the `myAnimationTrigger` trigger value changes.
|
1476
1476
|
* function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
|
1477
1477
|
string]: any}): boolean {
|
@@ -1504,7 +1504,7 @@ export declare function transition(stateChangeExpr: string | ((fromState: string
|
|
1504
1504
|
*
|
1505
1505
|
* The following example shows how to use this feature:
|
1506
1506
|
*
|
1507
|
-
* ```
|
1507
|
+
* ```angular-ts
|
1508
1508
|
* @Component({
|
1509
1509
|
* selector: 'my-component',
|
1510
1510
|
* template: `
|
@@ -1533,7 +1533,7 @@ export declare function transition(stateChangeExpr: string | ((fromState: string
|
|
1533
1533
|
* This means that you can disable all animations for an app
|
1534
1534
|
* by placing a host binding set on `@.disabled` on the topmost Angular component.
|
1535
1535
|
*
|
1536
|
-
* ```
|
1536
|
+
* ```ts
|
1537
1537
|
* import {Component, HostBinding} from '@angular/core';
|
1538
1538
|
*
|
1539
1539
|
* @Component({
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@angular/animations",
|
3
|
-
"version": "19.0.
|
3
|
+
"version": "19.0.3",
|
4
4
|
"description": "Angular - animations integration with web-animations",
|
5
5
|
"author": "angular",
|
6
6
|
"license": "MIT",
|
@@ -11,7 +11,7 @@
|
|
11
11
|
"tslib": "^2.3.0"
|
12
12
|
},
|
13
13
|
"peerDependencies": {
|
14
|
-
"@angular/core": "19.0.
|
14
|
+
"@angular/core": "19.0.3"
|
15
15
|
},
|
16
16
|
"repository": {
|
17
17
|
"type": "git",
|