@angular/animations 17.1.0 → 17.2.0-next.0
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 +4 -3
- package/browser/testing/index.d.ts +1 -1
- package/esm2022/browser/src/create_engine.mjs +4 -4
- package/esm2022/browser/src/dsl/animation.mjs +7 -5
- package/esm2022/browser/src/dsl/animation_ast.mjs +1 -1
- package/esm2022/browser/src/dsl/animation_ast_builder.mjs +55 -43
- package/esm2022/browser/src/dsl/animation_dsl_visitor.mjs +1 -1
- package/esm2022/browser/src/dsl/animation_timeline_builder.mjs +33 -29
- package/esm2022/browser/src/dsl/animation_timeline_instruction.mjs +2 -2
- package/esm2022/browser/src/dsl/animation_transition_expr.mjs +4 -2
- package/esm2022/browser/src/dsl/animation_transition_factory.mjs +19 -17
- package/esm2022/browser/src/dsl/animation_transition_instruction.mjs +2 -2
- package/esm2022/browser/src/dsl/animation_trigger.mjs +5 -5
- package/esm2022/browser/src/dsl/element_instruction_map.mjs +2 -2
- package/esm2022/browser/src/dsl/style_normalization/animation_style_normalizer.mjs +1 -1
- package/esm2022/browser/src/dsl/style_normalization/web_animations_style_normalizer.mjs +2 -2
- package/esm2022/browser/src/error_helpers.mjs +24 -12
- package/esm2022/browser/src/private_export.mjs +5 -5
- package/esm2022/browser/src/render/animation_driver.mjs +5 -5
- package/esm2022/browser/src/render/animation_engine_instruction.mjs +1 -1
- package/esm2022/browser/src/render/animation_engine_next.mjs +4 -7
- package/esm2022/browser/src/render/animation_renderer.mjs +3 -4
- package/esm2022/browser/src/render/renderer.mjs +2 -2
- package/esm2022/browser/src/render/shared.mjs +7 -9
- package/esm2022/browser/src/render/special_cased_styles.mjs +4 -5
- package/esm2022/browser/src/render/timeline_animation_engine.mjs +7 -7
- package/esm2022/browser/src/render/transition_animation_engine.mjs +106 -87
- package/esm2022/browser/src/render/web_animations/web_animations_driver.mjs +6 -6
- package/esm2022/browser/src/render/web_animations/web_animations_player.mjs +6 -6
- package/esm2022/browser/src/util.mjs +10 -10
- package/esm2022/browser/src/warning_helpers.mjs +5 -2
- package/esm2022/browser/testing/src/mock_animation_driver.mjs +5 -5
- package/esm2022/src/animation_builder.mjs +7 -7
- package/esm2022/src/animation_metadata.mjs +1 -1
- package/esm2022/src/animations.mjs +2 -2
- package/esm2022/src/errors.mjs +1 -1
- package/esm2022/src/players/animation_group_player.mjs +15 -15
- package/esm2022/src/players/animation_player.mjs +5 -5
- package/esm2022/src/version.mjs +1 -1
- package/fesm2022/animations.mjs +25 -25
- package/fesm2022/animations.mjs.map +1 -1
- package/fesm2022/browser/testing.mjs +4 -4
- package/fesm2022/browser/testing.mjs.map +1 -1
- package/fesm2022/browser.mjs +283 -234
- package/fesm2022/browser.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +2 -2
package/fesm2022/browser.mjs
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* @license Angular v17.
|
2
|
+
* @license Angular v17.2.0-next.0
|
3
3
|
* (c) 2010-2022 Google LLC. https://angular.io/
|
4
4
|
* License: MIT
|
5
5
|
*/
|
@@ -33,7 +33,7 @@ function invalidCssUnitValue(userProvidedProperty, value) {
|
|
33
33
|
}
|
34
34
|
function invalidTrigger() {
|
35
35
|
return new ɵRuntimeError(3006 /* RuntimeErrorCode.INVALID_TRIGGER */, ngDevMode &&
|
36
|
-
|
36
|
+
"animation triggers cannot be prefixed with an `@` sign (e.g. trigger('@foo', [...]))");
|
37
37
|
}
|
38
38
|
function invalidDefinition() {
|
39
39
|
return new ɵRuntimeError(3007 /* RuntimeErrorCode.INVALID_DEFINITION */, ngDevMode && 'only state() and transition() definitions can sit inside of a trigger()');
|
@@ -79,29 +79,37 @@ function invalidTransitionAlias(alias) {
|
|
79
79
|
return new ɵRuntimeError(3016 /* RuntimeErrorCode.INVALID_TRANSITION_ALIAS */, ngDevMode && `The transition alias value "${alias}" is not supported`);
|
80
80
|
}
|
81
81
|
function validationFailed(errors) {
|
82
|
-
return new ɵRuntimeError(3500 /* RuntimeErrorCode.VALIDATION_FAILED */, ngDevMode && `animation validation failed:\n${errors.map(err => err.message).join('\n')}`);
|
82
|
+
return new ɵRuntimeError(3500 /* RuntimeErrorCode.VALIDATION_FAILED */, ngDevMode && `animation validation failed:\n${errors.map((err) => err.message).join('\n')}`);
|
83
83
|
}
|
84
84
|
function buildingFailed(errors) {
|
85
|
-
return new ɵRuntimeError(3501 /* RuntimeErrorCode.BUILDING_FAILED */, ngDevMode && `animation building failed:\n${errors.map(err => err.message).join('\n')}`);
|
85
|
+
return new ɵRuntimeError(3501 /* RuntimeErrorCode.BUILDING_FAILED */, ngDevMode && `animation building failed:\n${errors.map((err) => err.message).join('\n')}`);
|
86
86
|
}
|
87
87
|
function triggerBuildFailed(name, errors) {
|
88
88
|
return new ɵRuntimeError(3404 /* RuntimeErrorCode.TRIGGER_BUILD_FAILED */, ngDevMode &&
|
89
|
-
`The animation trigger "${name}" has failed to build due to the following errors:\n - ${errors
|
89
|
+
`The animation trigger "${name}" has failed to build due to the following errors:\n - ${errors
|
90
|
+
.map((err) => err.message)
|
91
|
+
.join('\n - ')}`);
|
90
92
|
}
|
91
93
|
function animationFailed(errors) {
|
92
94
|
return new ɵRuntimeError(3502 /* RuntimeErrorCode.ANIMATION_FAILED */, ngDevMode &&
|
93
|
-
`Unable to animate due to the following errors:${LINE_START}${errors
|
95
|
+
`Unable to animate due to the following errors:${LINE_START}${errors
|
96
|
+
.map((err) => err.message)
|
97
|
+
.join(LINE_START)}`);
|
94
98
|
}
|
95
99
|
function registerFailed(errors) {
|
96
100
|
return new ɵRuntimeError(3503 /* RuntimeErrorCode.REGISTRATION_FAILED */, ngDevMode &&
|
97
|
-
`Unable to build the animation due to the following errors: ${errors
|
101
|
+
`Unable to build the animation due to the following errors: ${errors
|
102
|
+
.map((err) => err.message)
|
103
|
+
.join('\n')}`);
|
98
104
|
}
|
99
105
|
function missingOrDestroyedAnimation() {
|
100
|
-
return new ɵRuntimeError(3300 /* RuntimeErrorCode.MISSING_OR_DESTROYED_ANIMATION */, ngDevMode &&
|
106
|
+
return new ɵRuntimeError(3300 /* RuntimeErrorCode.MISSING_OR_DESTROYED_ANIMATION */, ngDevMode && "The requested animation doesn't exist or has already been destroyed");
|
101
107
|
}
|
102
108
|
function createAnimationFailed(errors) {
|
103
109
|
return new ɵRuntimeError(3504 /* RuntimeErrorCode.CREATE_ANIMATION_FAILED */, ngDevMode &&
|
104
|
-
`Unable to create the animation due to the following errors:${errors
|
110
|
+
`Unable to create the animation due to the following errors:${errors
|
111
|
+
.map((err) => err.message)
|
112
|
+
.join('\n')}`);
|
105
113
|
}
|
106
114
|
function missingPlayer(id) {
|
107
115
|
return new ɵRuntimeError(3301 /* RuntimeErrorCode.MISSING_PLAYER */, ngDevMode && `Unable to find the timeline player referenced by ${id}`);
|
@@ -123,14 +131,18 @@ function unregisteredTrigger(name) {
|
|
123
131
|
}
|
124
132
|
function triggerTransitionsFailed(errors) {
|
125
133
|
return new ɵRuntimeError(3402 /* RuntimeErrorCode.TRIGGER_TRANSITIONS_FAILED */, ngDevMode &&
|
126
|
-
`Unable to process animations due to the following failed trigger transitions\n ${errors
|
134
|
+
`Unable to process animations due to the following failed trigger transitions\n ${errors
|
135
|
+
.map((err) => err.message)
|
136
|
+
.join('\n')}`);
|
127
137
|
}
|
128
138
|
function triggerParsingFailed(name, errors) {
|
129
139
|
return new ɵRuntimeError(3403 /* RuntimeErrorCode.TRIGGER_PARSING_FAILED */, ngDevMode &&
|
130
|
-
`Animation parsing for the ${name} trigger have failed:${LINE_START}${errors
|
140
|
+
`Animation parsing for the ${name} trigger have failed:${LINE_START}${errors
|
141
|
+
.map((err) => err.message)
|
142
|
+
.join(LINE_START)}`);
|
131
143
|
}
|
132
144
|
function transitionFailed(name, errors) {
|
133
|
-
return new ɵRuntimeError(3505 /* RuntimeErrorCode.TRANSITION_FAILED */, ngDevMode && `@${name} has failed due to:\n ${errors.map(err => err.message).join('\n- ')}`);
|
145
|
+
return new ɵRuntimeError(3505 /* RuntimeErrorCode.TRANSITION_FAILED */, ngDevMode && `@${name} has failed due to:\n ${errors.map((err) => err.message).join('\n- ')}`);
|
134
146
|
}
|
135
147
|
|
136
148
|
/**
|
@@ -355,7 +367,7 @@ function normalizeKeyframes$1(normalizer, keyframes, preStyles = new Map(), post
|
|
355
367
|
const normalizedKeyframes = [];
|
356
368
|
let previousOffset = -1;
|
357
369
|
let previousKeyframe = null;
|
358
|
-
keyframes.forEach(kf => {
|
370
|
+
keyframes.forEach((kf) => {
|
359
371
|
const offset = kf.get('offset');
|
360
372
|
const isSameOffset = offset == previousOffset;
|
361
373
|
const normalizedKeyframe = (isSameOffset && previousKeyframe) || new Map();
|
@@ -372,8 +384,7 @@ function normalizeKeyframes$1(normalizer, keyframes, preStyles = new Map(), post
|
|
372
384
|
normalizedValue = postStyles.get(prop);
|
373
385
|
break;
|
374
386
|
default:
|
375
|
-
normalizedValue =
|
376
|
-
normalizer.normalizeStyleValue(prop, normalizedProp, normalizedValue, errors);
|
387
|
+
normalizedValue = normalizer.normalizeStyleValue(prop, normalizedProp, normalizedValue, errors);
|
377
388
|
break;
|
378
389
|
}
|
379
390
|
}
|
@@ -419,7 +430,7 @@ function makeAnimationEvent(element, triggerName, fromState, toState, phaseName
|
|
419
430
|
function getOrSetDefaultValue(map, key, defaultValue) {
|
420
431
|
let value = map.get(key);
|
421
432
|
if (!value) {
|
422
|
-
map.set(key, value = defaultValue);
|
433
|
+
map.set(key, (value = defaultValue));
|
423
434
|
}
|
424
435
|
return value;
|
425
436
|
}
|
@@ -429,8 +440,7 @@ function parseTimelineCommand(command) {
|
|
429
440
|
const action = command.slice(separatorPos + 1);
|
430
441
|
return [id, action];
|
431
442
|
}
|
432
|
-
const documentElement =
|
433
|
-
/* @__PURE__ */ (() => typeof document === 'undefined' ? null : document.documentElement)();
|
443
|
+
const documentElement = /* @__PURE__ */ (() => typeof document === 'undefined' ? null : document.documentElement)();
|
434
444
|
function getParentElement(element) {
|
435
445
|
const parent = element.parentNode || element.host || null; // consider host to support shadow DOM
|
436
446
|
if (parent === documentElement) {
|
@@ -448,7 +458,7 @@ let _IS_WEBKIT = false;
|
|
448
458
|
function validateStyleProperty(prop) {
|
449
459
|
if (!_CACHED_BODY) {
|
450
460
|
_CACHED_BODY = getBodyNode() || {};
|
451
|
-
_IS_WEBKIT = _CACHED_BODY.style ?
|
461
|
+
_IS_WEBKIT = _CACHED_BODY.style ? 'WebkitAppearance' in _CACHED_BODY.style : false;
|
452
462
|
}
|
453
463
|
let result = true;
|
454
464
|
if (_CACHED_BODY.style && !containsVendorPrefix(prop)) {
|
@@ -545,10 +555,10 @@ class NoopAnimationDriver {
|
|
545
555
|
animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
|
546
556
|
return new NoopAnimationPlayer(duration, delay);
|
547
557
|
}
|
548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
549
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
558
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0-next.0", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
559
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.0-next.0", ngImport: i0, type: NoopAnimationDriver }); }
|
550
560
|
}
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0-next.0", ngImport: i0, type: NoopAnimationDriver, decorators: [{
|
552
562
|
type: Injectable
|
553
563
|
}] });
|
554
564
|
/**
|
@@ -558,7 +568,7 @@ class AnimationDriver {
|
|
558
568
|
/**
|
559
569
|
* @deprecated Use the NoopAnimationDriver class.
|
560
570
|
*/
|
561
|
-
static { this.NOOP =
|
571
|
+
static { this.NOOP = new NoopAnimationDriver(); }
|
562
572
|
}
|
563
573
|
|
564
574
|
class AnimationStyleNormalizer {
|
@@ -598,9 +608,9 @@ function _convertTimeValueToMS(value, unit) {
|
|
598
608
|
}
|
599
609
|
}
|
600
610
|
function resolveTiming(timings, errors, allowNegativeValues) {
|
601
|
-
return timings.hasOwnProperty('duration')
|
602
|
-
timings
|
603
|
-
parseTimeExpression(timings, errors, allowNegativeValues);
|
611
|
+
return timings.hasOwnProperty('duration')
|
612
|
+
? timings
|
613
|
+
: parseTimeExpression(timings, errors, allowNegativeValues);
|
604
614
|
}
|
605
615
|
function parseTimeExpression(exp, errors, allowNegativeValues) {
|
606
616
|
const regex = /^(-?[\.\d]+)(m?s)(?:\s+(-?[\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
|
@@ -650,7 +660,7 @@ function normalizeKeyframes(keyframes) {
|
|
650
660
|
if (keyframes[0] instanceof Map) {
|
651
661
|
return keyframes;
|
652
662
|
}
|
653
|
-
return keyframes.map(kf => new Map(Object.entries(kf)));
|
663
|
+
return keyframes.map((kf) => new Map(Object.entries(kf)));
|
654
664
|
}
|
655
665
|
function normalizeStyles(styles) {
|
656
666
|
return Array.isArray(styles) ? new Map(...styles) : new Map(styles);
|
@@ -682,7 +692,7 @@ function validateStyleParams(value, options, errors) {
|
|
682
692
|
const params = options.params || {};
|
683
693
|
const matches = extractStyleParams(value);
|
684
694
|
if (matches.length) {
|
685
|
-
matches.forEach(varName => {
|
695
|
+
matches.forEach((varName) => {
|
686
696
|
if (!params.hasOwnProperty(varName)) {
|
687
697
|
errors.push(invalidStyleParams(varName));
|
688
698
|
}
|
@@ -694,7 +704,7 @@ function extractStyleParams(value) {
|
|
694
704
|
let params = [];
|
695
705
|
if (typeof value === 'string') {
|
696
706
|
let match;
|
697
|
-
while (match = PARAM_REGEX.exec(value)) {
|
707
|
+
while ((match = PARAM_REGEX.exec(value))) {
|
698
708
|
params.push(match[1]);
|
699
709
|
}
|
700
710
|
PARAM_REGEX.lastIndex = 0;
|
@@ -738,7 +748,7 @@ function balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles)
|
|
738
748
|
if (missingStyleProps.length) {
|
739
749
|
for (let i = 1; i < keyframes.length; i++) {
|
740
750
|
let kf = keyframes[i];
|
741
|
-
missingStyleProps.forEach(prop => kf.set(prop, computeStyle(element, prop)));
|
751
|
+
missingStyleProps.forEach((prop) => kf.set(prop, computeStyle(element, prop)));
|
742
752
|
}
|
743
753
|
}
|
744
754
|
}
|
@@ -809,7 +819,7 @@ const DIMENSIONAL_PROP_SET = new Set([
|
|
809
819
|
'borderRightWidth',
|
810
820
|
'borderBottomWidth',
|
811
821
|
'textIndent',
|
812
|
-
'perspective'
|
822
|
+
'perspective',
|
813
823
|
]);
|
814
824
|
class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
|
815
825
|
normalizePropertyName(propertyName, errors) {
|
@@ -835,7 +845,10 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
|
|
835
845
|
|
836
846
|
function createListOfWarnings(warnings) {
|
837
847
|
const LINE_START = '\n - ';
|
838
|
-
return `${LINE_START}${warnings
|
848
|
+
return `${LINE_START}${warnings
|
849
|
+
.filter(Boolean)
|
850
|
+
.map((warning) => warning)
|
851
|
+
.join(LINE_START)}`;
|
839
852
|
}
|
840
853
|
function warnValidation(warnings) {
|
841
854
|
(typeof ngDevMode === 'undefined' || ngDevMode) &&
|
@@ -863,7 +876,9 @@ const ANY_STATE = '*';
|
|
863
876
|
function parseTransitionExpr(transitionValue, errors) {
|
864
877
|
const expressions = [];
|
865
878
|
if (typeof transitionValue == 'string') {
|
866
|
-
transitionValue
|
879
|
+
transitionValue
|
880
|
+
.split(/\s*,\s*/)
|
881
|
+
.forEach((str) => parseInnerTransitionStr(str, expressions, errors));
|
867
882
|
}
|
868
883
|
else {
|
869
884
|
expressions.push(transitionValue);
|
@@ -980,10 +995,12 @@ class AnimationAstBuilderVisitor {
|
|
980
995
|
build(metadata, errors, warnings) {
|
981
996
|
const context = new AnimationAstBuilderContext(errors);
|
982
997
|
this._resetContextStyleTimingState(context);
|
983
|
-
const ast = visitDslNode(this, normalizeAnimationEntry(metadata), context);
|
998
|
+
const ast = (visitDslNode(this, normalizeAnimationEntry(metadata), context));
|
984
999
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
985
1000
|
if (context.unsupportedCSSPropertiesFound.size) {
|
986
|
-
pushUnrecognizedPropertiesWarning(warnings, [
|
1001
|
+
pushUnrecognizedPropertiesWarning(warnings, [
|
1002
|
+
...context.unsupportedCSSPropertiesFound.keys(),
|
1003
|
+
]);
|
987
1004
|
}
|
988
1005
|
}
|
989
1006
|
return ast;
|
@@ -995,19 +1012,22 @@ class AnimationAstBuilderVisitor {
|
|
995
1012
|
context.currentTime = 0;
|
996
1013
|
}
|
997
1014
|
visitTrigger(metadata, context) {
|
998
|
-
let queryCount = context.queryCount = 0;
|
999
|
-
let depCount = context.depCount = 0;
|
1015
|
+
let queryCount = (context.queryCount = 0);
|
1016
|
+
let depCount = (context.depCount = 0);
|
1000
1017
|
const states = [];
|
1001
1018
|
const transitions = [];
|
1002
1019
|
if (metadata.name.charAt(0) == '@') {
|
1003
1020
|
context.errors.push(invalidTrigger());
|
1004
1021
|
}
|
1005
|
-
metadata.definitions.forEach(def => {
|
1022
|
+
metadata.definitions.forEach((def) => {
|
1006
1023
|
this._resetContextStyleTimingState(context);
|
1007
1024
|
if (def.type == AnimationMetadataType.State) {
|
1008
1025
|
const stateDef = def;
|
1009
1026
|
const name = stateDef.name;
|
1010
|
-
name
|
1027
|
+
name
|
1028
|
+
.toString()
|
1029
|
+
.split(/\s*,\s*/)
|
1030
|
+
.forEach((n) => {
|
1011
1031
|
stateDef.name = n;
|
1012
1032
|
states.push(this.visitState(stateDef, context));
|
1013
1033
|
});
|
@@ -1030,7 +1050,7 @@ class AnimationAstBuilderVisitor {
|
|
1030
1050
|
transitions,
|
1031
1051
|
queryCount,
|
1032
1052
|
depCount,
|
1033
|
-
options: null
|
1053
|
+
options: null,
|
1034
1054
|
};
|
1035
1055
|
}
|
1036
1056
|
visitState(metadata, context) {
|
@@ -1039,10 +1059,10 @@ class AnimationAstBuilderVisitor {
|
|
1039
1059
|
if (styleAst.containsDynamicStyles) {
|
1040
1060
|
const missingSubs = new Set();
|
1041
1061
|
const params = astParams || {};
|
1042
|
-
styleAst.styles.forEach(style => {
|
1062
|
+
styleAst.styles.forEach((style) => {
|
1043
1063
|
if (style instanceof Map) {
|
1044
|
-
style.forEach(value => {
|
1045
|
-
extractStyleParams(value).forEach(sub => {
|
1064
|
+
style.forEach((value) => {
|
1065
|
+
extractStyleParams(value).forEach((sub) => {
|
1046
1066
|
if (!params.hasOwnProperty(sub)) {
|
1047
1067
|
missingSubs.add(sub);
|
1048
1068
|
}
|
@@ -1058,7 +1078,7 @@ class AnimationAstBuilderVisitor {
|
|
1058
1078
|
type: AnimationMetadataType.State,
|
1059
1079
|
name: metadata.name,
|
1060
1080
|
style: styleAst,
|
1061
|
-
options: astParams ? { params: astParams } : null
|
1081
|
+
options: astParams ? { params: astParams } : null,
|
1062
1082
|
};
|
1063
1083
|
}
|
1064
1084
|
visitTransition(metadata, context) {
|
@@ -1072,20 +1092,20 @@ class AnimationAstBuilderVisitor {
|
|
1072
1092
|
animation,
|
1073
1093
|
queryCount: context.queryCount,
|
1074
1094
|
depCount: context.depCount,
|
1075
|
-
options: normalizeAnimationOptions(metadata.options)
|
1095
|
+
options: normalizeAnimationOptions(metadata.options),
|
1076
1096
|
};
|
1077
1097
|
}
|
1078
1098
|
visitSequence(metadata, context) {
|
1079
1099
|
return {
|
1080
1100
|
type: AnimationMetadataType.Sequence,
|
1081
|
-
steps: metadata.steps.map(s => visitDslNode(this, s, context)),
|
1082
|
-
options: normalizeAnimationOptions(metadata.options)
|
1101
|
+
steps: metadata.steps.map((s) => visitDslNode(this, s, context)),
|
1102
|
+
options: normalizeAnimationOptions(metadata.options),
|
1083
1103
|
};
|
1084
1104
|
}
|
1085
1105
|
visitGroup(metadata, context) {
|
1086
1106
|
const currentTime = context.currentTime;
|
1087
1107
|
let furthestTime = 0;
|
1088
|
-
const steps = metadata.steps.map(step => {
|
1108
|
+
const steps = metadata.steps.map((step) => {
|
1089
1109
|
context.currentTime = currentTime;
|
1090
1110
|
const innerAst = visitDslNode(this, step, context);
|
1091
1111
|
furthestTime = Math.max(furthestTime, context.currentTime);
|
@@ -1095,14 +1115,16 @@ class AnimationAstBuilderVisitor {
|
|
1095
1115
|
return {
|
1096
1116
|
type: AnimationMetadataType.Group,
|
1097
1117
|
steps,
|
1098
|
-
options: normalizeAnimationOptions(metadata.options)
|
1118
|
+
options: normalizeAnimationOptions(metadata.options),
|
1099
1119
|
};
|
1100
1120
|
}
|
1101
1121
|
visitAnimate(metadata, context) {
|
1102
1122
|
const timingAst = constructTimingAst(metadata.timings, context.errors);
|
1103
1123
|
context.currentAnimateTimings = timingAst;
|
1104
1124
|
let styleAst;
|
1105
|
-
let styleMetadata = metadata.styles
|
1125
|
+
let styleMetadata = metadata.styles
|
1126
|
+
? metadata.styles
|
1127
|
+
: style({});
|
1106
1128
|
if (styleMetadata.type == AnimationMetadataType.Keyframes) {
|
1107
1129
|
styleAst = this.visitKeyframes(styleMetadata, context);
|
1108
1130
|
}
|
@@ -1127,7 +1149,7 @@ class AnimationAstBuilderVisitor {
|
|
1127
1149
|
type: AnimationMetadataType.Animate,
|
1128
1150
|
timings: timingAst,
|
1129
1151
|
style: styleAst,
|
1130
|
-
options: null
|
1152
|
+
options: null,
|
1131
1153
|
};
|
1132
1154
|
}
|
1133
1155
|
visitStyle(metadata, context) {
|
@@ -1153,7 +1175,7 @@ class AnimationAstBuilderVisitor {
|
|
1153
1175
|
}
|
1154
1176
|
let containsDynamicStyles = false;
|
1155
1177
|
let collectedEasing = null;
|
1156
|
-
styles.forEach(styleData => {
|
1178
|
+
styles.forEach((styleData) => {
|
1157
1179
|
if (styleData instanceof Map) {
|
1158
1180
|
if (styleData.has('easing')) {
|
1159
1181
|
collectedEasing = styleData.get('easing');
|
@@ -1175,7 +1197,7 @@ class AnimationAstBuilderVisitor {
|
|
1175
1197
|
easing: collectedEasing,
|
1176
1198
|
offset: metadata.offset,
|
1177
1199
|
containsDynamicStyles,
|
1178
|
-
options: null
|
1200
|
+
options: null,
|
1179
1201
|
};
|
1180
1202
|
}
|
1181
1203
|
_validateStyleAst(ast, context) {
|
@@ -1185,7 +1207,7 @@ class AnimationAstBuilderVisitor {
|
|
1185
1207
|
if (timings && startTime > 0) {
|
1186
1208
|
startTime -= timings.duration + timings.delay;
|
1187
1209
|
}
|
1188
|
-
ast.styles.forEach(tuple => {
|
1210
|
+
ast.styles.forEach((tuple) => {
|
1189
1211
|
if (typeof tuple === 'string')
|
1190
1212
|
return;
|
1191
1213
|
tuple.forEach((value, prop) => {
|
@@ -1202,7 +1224,8 @@ class AnimationAstBuilderVisitor {
|
|
1202
1224
|
const collectedEntry = collectedStyles.get(prop);
|
1203
1225
|
let updateCollectedStyle = true;
|
1204
1226
|
if (collectedEntry) {
|
1205
|
-
if (startTime != endTime &&
|
1227
|
+
if (startTime != endTime &&
|
1228
|
+
startTime >= collectedEntry.startTime &&
|
1206
1229
|
endTime <= collectedEntry.endTime) {
|
1207
1230
|
context.errors.push(invalidParallelAnimation(prop, collectedEntry.startTime, collectedEntry.endTime, startTime, endTime));
|
1208
1231
|
updateCollectedStyle = false;
|
@@ -1233,7 +1256,7 @@ class AnimationAstBuilderVisitor {
|
|
1233
1256
|
let offsetsOutOfOrder = false;
|
1234
1257
|
let keyframesOutOfRange = false;
|
1235
1258
|
let previousOffset = 0;
|
1236
|
-
const keyframes = metadata.steps.map(styles => {
|
1259
|
+
const keyframes = metadata.steps.map((styles) => {
|
1237
1260
|
const style = this._makeStyleAst(styles, context);
|
1238
1261
|
let offsetVal = style.offset != null ? style.offset : consumeOffset(style.styles);
|
1239
1262
|
let offset = 0;
|
@@ -1266,7 +1289,7 @@ class AnimationAstBuilderVisitor {
|
|
1266
1289
|
const currentAnimateTimings = context.currentAnimateTimings;
|
1267
1290
|
const animateDuration = currentAnimateTimings.duration;
|
1268
1291
|
keyframes.forEach((kf, i) => {
|
1269
|
-
const offset = generatedOffset > 0 ? (i == limit ? 1 :
|
1292
|
+
const offset = generatedOffset > 0 ? (i == limit ? 1 : generatedOffset * i) : offsets[i];
|
1270
1293
|
const durationUpToThisFrame = offset * animateDuration;
|
1271
1294
|
context.currentTime = currentTime + currentAnimateTimings.delay + durationUpToThisFrame;
|
1272
1295
|
currentAnimateTimings.duration = durationUpToThisFrame;
|
@@ -1280,21 +1303,21 @@ class AnimationAstBuilderVisitor {
|
|
1280
1303
|
return {
|
1281
1304
|
type: AnimationMetadataType.Reference,
|
1282
1305
|
animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context),
|
1283
|
-
options: normalizeAnimationOptions(metadata.options)
|
1306
|
+
options: normalizeAnimationOptions(metadata.options),
|
1284
1307
|
};
|
1285
1308
|
}
|
1286
1309
|
visitAnimateChild(metadata, context) {
|
1287
1310
|
context.depCount++;
|
1288
1311
|
return {
|
1289
1312
|
type: AnimationMetadataType.AnimateChild,
|
1290
|
-
options: normalizeAnimationOptions(metadata.options)
|
1313
|
+
options: normalizeAnimationOptions(metadata.options),
|
1291
1314
|
};
|
1292
1315
|
}
|
1293
1316
|
visitAnimateRef(metadata, context) {
|
1294
1317
|
return {
|
1295
1318
|
type: AnimationMetadataType.AnimateRef,
|
1296
1319
|
animation: this.visitReference(metadata.animation, context),
|
1297
|
-
options: normalizeAnimationOptions(metadata.options)
|
1320
|
+
options: normalizeAnimationOptions(metadata.options),
|
1298
1321
|
};
|
1299
1322
|
}
|
1300
1323
|
visitQuery(metadata, context) {
|
@@ -1303,8 +1326,9 @@ class AnimationAstBuilderVisitor {
|
|
1303
1326
|
context.queryCount++;
|
1304
1327
|
context.currentQuery = metadata;
|
1305
1328
|
const [selector, includeSelf] = normalizeSelector(metadata.selector);
|
1306
|
-
context.currentQuerySelector =
|
1307
|
-
|
1329
|
+
context.currentQuerySelector = parentSelector.length
|
1330
|
+
? parentSelector + ' ' + selector
|
1331
|
+
: selector;
|
1308
1332
|
getOrSetDefaultValue(context.collectedStyles, context.currentQuerySelector, new Map());
|
1309
1333
|
const animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context);
|
1310
1334
|
context.currentQuery = null;
|
@@ -1317,33 +1341,36 @@ class AnimationAstBuilderVisitor {
|
|
1317
1341
|
includeSelf,
|
1318
1342
|
animation,
|
1319
1343
|
originalSelector: metadata.selector,
|
1320
|
-
options: normalizeAnimationOptions(metadata.options)
|
1344
|
+
options: normalizeAnimationOptions(metadata.options),
|
1321
1345
|
};
|
1322
1346
|
}
|
1323
1347
|
visitStagger(metadata, context) {
|
1324
1348
|
if (!context.currentQuery) {
|
1325
1349
|
context.errors.push(invalidStagger());
|
1326
1350
|
}
|
1327
|
-
const timings = metadata.timings === 'full'
|
1328
|
-
{ duration: 0, delay: 0, easing: 'full' }
|
1329
|
-
resolveTiming(metadata.timings, context.errors, true);
|
1351
|
+
const timings = metadata.timings === 'full'
|
1352
|
+
? { duration: 0, delay: 0, easing: 'full' }
|
1353
|
+
: resolveTiming(metadata.timings, context.errors, true);
|
1330
1354
|
return {
|
1331
1355
|
type: AnimationMetadataType.Stagger,
|
1332
1356
|
animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context),
|
1333
1357
|
timings,
|
1334
|
-
options: null
|
1358
|
+
options: null,
|
1335
1359
|
};
|
1336
1360
|
}
|
1337
1361
|
}
|
1338
1362
|
function normalizeSelector(selector) {
|
1339
|
-
const hasAmpersand = selector.split(/\s*,\s*/).find(token => token == SELF_TOKEN)
|
1363
|
+
const hasAmpersand = selector.split(/\s*,\s*/).find((token) => token == SELF_TOKEN)
|
1364
|
+
? true
|
1365
|
+
: false;
|
1340
1366
|
if (hasAmpersand) {
|
1341
1367
|
selector = selector.replace(SELF_TOKEN_REGEX, '');
|
1342
1368
|
}
|
1343
1369
|
// Note: the :enter and :leave aren't normalized here since those
|
1344
1370
|
// selectors are filled in at runtime during timeline building
|
1345
|
-
selector = selector
|
1346
|
-
.replace(
|
1371
|
+
selector = selector
|
1372
|
+
.replace(/@\*/g, NG_TRIGGER_SELECTOR)
|
1373
|
+
.replace(/@\w+/g, (match) => NG_TRIGGER_SELECTOR + '-' + match.slice(1))
|
1347
1374
|
.replace(/:animating/g, NG_ANIMATING_SELECTOR);
|
1348
1375
|
return [selector, hasAmpersand];
|
1349
1376
|
}
|
@@ -1370,7 +1397,7 @@ function consumeOffset(styles) {
|
|
1370
1397
|
return null;
|
1371
1398
|
let offset = null;
|
1372
1399
|
if (Array.isArray(styles)) {
|
1373
|
-
styles.forEach(styleTuple => {
|
1400
|
+
styles.forEach((styleTuple) => {
|
1374
1401
|
if (styleTuple instanceof Map && styleTuple.has('offset')) {
|
1375
1402
|
const obj = styleTuple;
|
1376
1403
|
offset = parseFloat(obj.get('offset'));
|
@@ -1394,7 +1421,7 @@ function constructTimingAst(value, errors) {
|
|
1394
1421
|
return makeTimingAst(duration, 0, '');
|
1395
1422
|
}
|
1396
1423
|
const strValue = value;
|
1397
|
-
const isDynamic = strValue.split(/\s+/).some(v => v.charAt(0) == '{' && v.charAt(1) == '{');
|
1424
|
+
const isDynamic = strValue.split(/\s+/).some((v) => v.charAt(0) == '{' && v.charAt(1) == '{');
|
1398
1425
|
if (isDynamic) {
|
1399
1426
|
const ast = makeTimingAst(0, 0, '');
|
1400
1427
|
ast.dynamic = true;
|
@@ -1431,7 +1458,7 @@ function createTimelineInstruction(element, keyframes, preStyleProps, postStyleP
|
|
1431
1458
|
delay,
|
1432
1459
|
totalTime: duration + delay,
|
1433
1460
|
easing,
|
1434
|
-
subTimeline
|
1461
|
+
subTimeline,
|
1435
1462
|
};
|
1436
1463
|
}
|
1437
1464
|
|
@@ -1445,7 +1472,7 @@ class ElementInstructionMap {
|
|
1445
1472
|
append(element, instructions) {
|
1446
1473
|
let existingInstructions = this._map.get(element);
|
1447
1474
|
if (!existingInstructions) {
|
1448
|
-
this._map.set(element, existingInstructions = []);
|
1475
|
+
this._map.set(element, (existingInstructions = []));
|
1449
1476
|
}
|
1450
1477
|
existingInstructions.push(...instructions);
|
1451
1478
|
}
|
@@ -1553,7 +1580,7 @@ class AnimationTimelineBuilderVisitor {
|
|
1553
1580
|
context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
|
1554
1581
|
visitDslNode(this, ast, context);
|
1555
1582
|
// this checks to see if an actual animation happened
|
1556
|
-
const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
|
1583
|
+
const timelines = context.timelines.filter((timeline) => timeline.containsAnimation());
|
1557
1584
|
// note: we just want to apply the final styles for the rootElement, so we do not
|
1558
1585
|
// just apply the styles to the last timeline but the last timeline which
|
1559
1586
|
// element is the root one (basically `*`-styles are replaced with the actual
|
@@ -1571,9 +1598,9 @@ class AnimationTimelineBuilderVisitor {
|
|
1571
1598
|
lastRootTimeline.setStyles([finalStyles], null, context.errors, options);
|
1572
1599
|
}
|
1573
1600
|
}
|
1574
|
-
return timelines.length
|
1575
|
-
timelines.map(timeline => timeline.buildKeyframes())
|
1576
|
-
[createTimelineInstruction(rootElement, [], [], [], 0, delay, '', false)];
|
1601
|
+
return timelines.length
|
1602
|
+
? timelines.map((timeline) => timeline.buildKeyframes())
|
1603
|
+
: [createTimelineInstruction(rootElement, [], [], [], 0, delay, '', false)];
|
1577
1604
|
}
|
1578
1605
|
visitTrigger(ast, context) {
|
1579
1606
|
// these values are not visited in this AST
|
@@ -1610,9 +1637,9 @@ class AnimationTimelineBuilderVisitor {
|
|
1610
1637
|
for (const animationRefOptions of animationsRefsOptions) {
|
1611
1638
|
const animationDelay = animationRefOptions?.delay;
|
1612
1639
|
if (animationDelay) {
|
1613
|
-
const animationDelayValue = typeof animationDelay === 'number'
|
1614
|
-
animationDelay
|
1615
|
-
resolveTimingValue(interpolateParams(animationDelay, animationRefOptions?.params ?? {}, context.errors));
|
1640
|
+
const animationDelayValue = typeof animationDelay === 'number'
|
1641
|
+
? animationDelay
|
1642
|
+
: resolveTimingValue(interpolateParams(animationDelay, animationRefOptions?.params ?? {}, context.errors));
|
1616
1643
|
innerContext.delayNextStep(animationDelayValue);
|
1617
1644
|
}
|
1618
1645
|
}
|
@@ -1625,10 +1652,9 @@ class AnimationTimelineBuilderVisitor {
|
|
1625
1652
|
const duration = options.duration != null ? resolveTimingValue(options.duration) : null;
|
1626
1653
|
const delay = options.delay != null ? resolveTimingValue(options.delay) : null;
|
1627
1654
|
if (duration !== 0) {
|
1628
|
-
instructions.forEach(instruction => {
|
1655
|
+
instructions.forEach((instruction) => {
|
1629
1656
|
const instructionTimings = context.appendInstructionToTimeline(instruction, duration, delay);
|
1630
|
-
furthestTime =
|
1631
|
-
Math.max(furthestTime, instructionTimings.duration + instructionTimings.delay);
|
1657
|
+
furthestTime = Math.max(furthestTime, instructionTimings.duration + instructionTimings.delay);
|
1632
1658
|
});
|
1633
1659
|
}
|
1634
1660
|
return furthestTime;
|
@@ -1655,7 +1681,7 @@ class AnimationTimelineBuilderVisitor {
|
|
1655
1681
|
}
|
1656
1682
|
}
|
1657
1683
|
if (ast.steps.length) {
|
1658
|
-
ast.steps.forEach(s => visitDslNode(this, s, ctx));
|
1684
|
+
ast.steps.forEach((s) => visitDslNode(this, s, ctx));
|
1659
1685
|
// this is here just in case the inner steps only contain or end with a style() call
|
1660
1686
|
ctx.currentTimeline.applyStylesToKeyframe();
|
1661
1687
|
// this means that some animation function within the sequence
|
@@ -1671,7 +1697,7 @@ class AnimationTimelineBuilderVisitor {
|
|
1671
1697
|
const innerTimelines = [];
|
1672
1698
|
let furthestTime = context.currentTimeline.currentTime;
|
1673
1699
|
const delay = ast.options && ast.options.delay ? resolveTimingValue(ast.options.delay) : 0;
|
1674
|
-
ast.steps.forEach(s => {
|
1700
|
+
ast.steps.forEach((s) => {
|
1675
1701
|
const innerContext = context.createSubContext(ast.options);
|
1676
1702
|
if (delay) {
|
1677
1703
|
innerContext.delayNextStep(delay);
|
@@ -1683,14 +1709,16 @@ class AnimationTimelineBuilderVisitor {
|
|
1683
1709
|
// this operation is run after the AST loop because otherwise
|
1684
1710
|
// if the parent timeline's collected styles were updated then
|
1685
1711
|
// it would pass in invalid data into the new-to-be forked items
|
1686
|
-
innerTimelines.forEach(timeline => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
|
1712
|
+
innerTimelines.forEach((timeline) => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
|
1687
1713
|
context.transformIntoNewTimeline(furthestTime);
|
1688
1714
|
context.previousNode = ast;
|
1689
1715
|
}
|
1690
1716
|
_visitTiming(ast, context) {
|
1691
1717
|
if (ast.dynamic) {
|
1692
1718
|
const strValue = ast.strValue;
|
1693
|
-
const timingValue = context.params
|
1719
|
+
const timingValue = context.params
|
1720
|
+
? interpolateParams(strValue, context.params, context.errors)
|
1721
|
+
: strValue;
|
1694
1722
|
return resolveTiming(timingValue, context.errors);
|
1695
1723
|
}
|
1696
1724
|
else {
|
@@ -1698,7 +1726,7 @@ class AnimationTimelineBuilderVisitor {
|
|
1698
1726
|
}
|
1699
1727
|
}
|
1700
1728
|
visitAnimate(ast, context) {
|
1701
|
-
const timings = context.currentAnimateTimings = this._visitTiming(ast.timings, context);
|
1729
|
+
const timings = (context.currentAnimateTimings = this._visitTiming(ast.timings, context));
|
1702
1730
|
const timeline = context.currentTimeline;
|
1703
1731
|
if (timings.delay) {
|
1704
1732
|
context.incrementTime(timings.delay);
|
@@ -1735,12 +1763,12 @@ class AnimationTimelineBuilderVisitor {
|
|
1735
1763
|
}
|
1736
1764
|
visitKeyframes(ast, context) {
|
1737
1765
|
const currentAnimateTimings = context.currentAnimateTimings;
|
1738
|
-
const startTime =
|
1766
|
+
const startTime = context.currentTimeline.duration;
|
1739
1767
|
const duration = currentAnimateTimings.duration;
|
1740
1768
|
const innerContext = context.createSubContext();
|
1741
1769
|
const innerTimeline = innerContext.currentTimeline;
|
1742
1770
|
innerTimeline.easing = currentAnimateTimings.easing;
|
1743
|
-
ast.styles.forEach(step => {
|
1771
|
+
ast.styles.forEach((step) => {
|
1744
1772
|
const offset = step.offset || 0;
|
1745
1773
|
innerTimeline.forwardTime(offset * duration);
|
1746
1774
|
innerTimeline.setStyles(step.styles, step.easing, context.errors, context.options);
|
@@ -1824,7 +1852,7 @@ class AnimationTimelineBuilderVisitor {
|
|
1824
1852
|
// the inner timeline may either have a delay value or a stretched
|
1825
1853
|
// keyframe depending on if a subtimeline is not used or is used.
|
1826
1854
|
parentContext.currentStaggerTime =
|
1827
|
-
|
1855
|
+
tl.currentTime - startingTime + (tl.startTime - parentContext.currentTimeline.startTime);
|
1828
1856
|
}
|
1829
1857
|
}
|
1830
1858
|
const DEFAULT_NOOP_PREVIOUS_NODE = {};
|
@@ -1869,7 +1897,7 @@ class AnimationTimelineContext {
|
|
1869
1897
|
if (!paramsToUpdate) {
|
1870
1898
|
paramsToUpdate = this.options.params = {};
|
1871
1899
|
}
|
1872
|
-
Object.keys(newParams).forEach(name => {
|
1900
|
+
Object.keys(newParams).forEach((name) => {
|
1873
1901
|
if (!skipIfExists || !paramsToUpdate.hasOwnProperty(name)) {
|
1874
1902
|
paramsToUpdate[name] = interpolateParams(newParams[name], paramsToUpdate, this.errors);
|
1875
1903
|
}
|
@@ -1881,8 +1909,8 @@ class AnimationTimelineContext {
|
|
1881
1909
|
if (this.options) {
|
1882
1910
|
const oldParams = this.options.params;
|
1883
1911
|
if (oldParams) {
|
1884
|
-
const params = options['params'] = {};
|
1885
|
-
Object.keys(oldParams).forEach(name => {
|
1912
|
+
const params = (options['params'] = {});
|
1913
|
+
Object.keys(oldParams).forEach((name) => {
|
1886
1914
|
params[name] = oldParams[name];
|
1887
1915
|
});
|
1888
1916
|
}
|
@@ -1912,7 +1940,7 @@ class AnimationTimelineContext {
|
|
1912
1940
|
const updatedTimings = {
|
1913
1941
|
duration: duration != null ? duration : instruction.duration,
|
1914
1942
|
delay: this.currentTimeline.currentTime + (delay != null ? delay : 0) + instruction.delay,
|
1915
|
-
easing: ''
|
1943
|
+
easing: '',
|
1916
1944
|
};
|
1917
1945
|
const builder = new SubTimelineBuilder(this._driver, instruction.element, instruction.keyframes, instruction.preStyleProps, instruction.postStyleProps, updatedTimings, instruction.stretchStartingKeyframe);
|
1918
1946
|
this.timelines.push(builder);
|
@@ -1932,14 +1960,17 @@ class AnimationTimelineContext {
|
|
1932
1960
|
if (includeSelf) {
|
1933
1961
|
results.push(this.element);
|
1934
1962
|
}
|
1935
|
-
if (selector.length > 0) {
|
1963
|
+
if (selector.length > 0) {
|
1964
|
+
// only if :self is used then the selector can be empty
|
1936
1965
|
selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
|
1937
1966
|
selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
|
1938
1967
|
const multi = limit != 1;
|
1939
1968
|
let elements = this._driver.query(this.element, selector, multi);
|
1940
1969
|
if (limit !== 0) {
|
1941
|
-
elements =
|
1942
|
-
|
1970
|
+
elements =
|
1971
|
+
limit < 0
|
1972
|
+
? elements.slice(elements.length + limit, elements.length)
|
1973
|
+
: elements.slice(0, limit);
|
1943
1974
|
}
|
1944
1975
|
results.push(...elements);
|
1945
1976
|
}
|
@@ -2205,7 +2236,7 @@ function roundOffset(offset, decimalPoints = 3) {
|
|
2205
2236
|
function flattenStyles(input, allStyles) {
|
2206
2237
|
const styles = new Map();
|
2207
2238
|
let allProperties;
|
2208
|
-
input.forEach(token => {
|
2239
|
+
input.forEach((token) => {
|
2209
2240
|
if (token === '*') {
|
2210
2241
|
allProperties ??= allStyles.keys();
|
2211
2242
|
for (let prop of allProperties) {
|
@@ -2236,7 +2267,7 @@ function createTransitionInstruction(element, triggerName, fromState, toState, i
|
|
2236
2267
|
preStyleProps,
|
2237
2268
|
postStyleProps,
|
2238
2269
|
totalTime,
|
2239
|
-
errors
|
2270
|
+
errors,
|
2240
2271
|
};
|
2241
2272
|
}
|
2242
2273
|
|
@@ -2259,10 +2290,10 @@ class AnimationTransitionFactory {
|
|
2259
2290
|
}
|
2260
2291
|
build(driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions, skipAstBuild) {
|
2261
2292
|
const errors = [];
|
2262
|
-
const transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
|
2263
|
-
const currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
|
2293
|
+
const transitionAnimationParams = (this.ast.options && this.ast.options.params) || EMPTY_OBJECT;
|
2294
|
+
const currentAnimationParams = (currentOptions && currentOptions.params) || EMPTY_OBJECT;
|
2264
2295
|
const currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors);
|
2265
|
-
const nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT;
|
2296
|
+
const nextAnimationParams = (nextOptions && nextOptions.params) || EMPTY_OBJECT;
|
2266
2297
|
const nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors);
|
2267
2298
|
const queriedElements = new Set();
|
2268
2299
|
const preStyleMap = new Map();
|
@@ -2272,22 +2303,22 @@ class AnimationTransitionFactory {
|
|
2272
2303
|
params: applyParamDefaults(nextAnimationParams, transitionAnimationParams),
|
2273
2304
|
delay: this.ast.options?.delay,
|
2274
2305
|
};
|
2275
|
-
const timelines = skipAstBuild
|
2276
|
-
[]
|
2277
|
-
buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
|
2306
|
+
const timelines = skipAstBuild
|
2307
|
+
? []
|
2308
|
+
: buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
|
2278
2309
|
let totalTime = 0;
|
2279
|
-
timelines.forEach(tl => {
|
2310
|
+
timelines.forEach((tl) => {
|
2280
2311
|
totalTime = Math.max(tl.duration + tl.delay, totalTime);
|
2281
2312
|
});
|
2282
2313
|
if (errors.length) {
|
2283
2314
|
return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, [], [], preStyleMap, postStyleMap, totalTime, errors);
|
2284
2315
|
}
|
2285
|
-
timelines.forEach(tl => {
|
2316
|
+
timelines.forEach((tl) => {
|
2286
2317
|
const elm = tl.element;
|
2287
2318
|
const preProps = getOrSetDefaultValue(preStyleMap, elm, new Set());
|
2288
|
-
tl.preStyleProps.forEach(prop => preProps.add(prop));
|
2319
|
+
tl.preStyleProps.forEach((prop) => preProps.add(prop));
|
2289
2320
|
const postProps = getOrSetDefaultValue(postStyleMap, elm, new Set());
|
2290
|
-
tl.postStyleProps.forEach(prop => postProps.add(prop));
|
2321
|
+
tl.postStyleProps.forEach((prop) => postProps.add(prop));
|
2291
2322
|
if (elm !== element) {
|
2292
2323
|
queriedElements.add(elm);
|
2293
2324
|
}
|
@@ -2321,12 +2352,12 @@ function checkNonAnimatableInTimelines(timelines, triggerName, driver) {
|
|
2321
2352
|
// easing functions, it represents a property of the animation
|
2322
2353
|
// which is not animatable but different values can be used
|
2323
2354
|
// in different steps
|
2324
|
-
'easing'
|
2355
|
+
'easing',
|
2325
2356
|
]);
|
2326
2357
|
const invalidNonAnimatableProps = new Set();
|
2327
2358
|
timelines.forEach(({ keyframes }) => {
|
2328
2359
|
const nonAnimatablePropsInitialValues = new Map();
|
2329
|
-
keyframes.forEach(keyframe => {
|
2360
|
+
keyframes.forEach((keyframe) => {
|
2330
2361
|
const entriesToCheck = Array.from(keyframe.entries()).filter(([prop]) => !allowedNonAnimatableProps.has(prop));
|
2331
2362
|
for (const [prop, value] of entriesToCheck) {
|
2332
2363
|
if (!driver.validateAnimatableStyleProperty(prop)) {
|
@@ -2345,12 +2376,14 @@ function checkNonAnimatableInTimelines(timelines, triggerName, driver) {
|
|
2345
2376
|
});
|
2346
2377
|
if (invalidNonAnimatableProps.size > 0) {
|
2347
2378
|
console.warn(`Warning: The animation trigger "${triggerName}" is attempting to animate the following` +
|
2348
|
-
' not animatable properties: ' +
|
2379
|
+
' not animatable properties: ' +
|
2380
|
+
Array.from(invalidNonAnimatableProps).join(', ') +
|
2381
|
+
'\n' +
|
2349
2382
|
'(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)');
|
2350
2383
|
}
|
2351
2384
|
}
|
2352
2385
|
function oneOrMoreTransitionsMatch(matchFns, currentState, nextState, element, params) {
|
2353
|
-
return matchFns.some(fn => fn(currentState, nextState, element, params));
|
2386
|
+
return matchFns.some((fn) => fn(currentState, nextState, element, params));
|
2354
2387
|
}
|
2355
2388
|
function applyParamDefaults(userParams, defaults) {
|
2356
2389
|
const result = { ...defaults };
|
@@ -2370,7 +2403,7 @@ class AnimationStateStyles {
|
|
2370
2403
|
buildStyles(params, errors) {
|
2371
2404
|
const finalStyles = new Map();
|
2372
2405
|
const combinedParams = applyParamDefaults(params, this.defaultParams);
|
2373
|
-
this.styles.styles.forEach(value => {
|
2406
|
+
this.styles.styles.forEach((value) => {
|
2374
2407
|
if (typeof value !== 'string') {
|
2375
2408
|
value.forEach((val, prop) => {
|
2376
2409
|
if (val) {
|
@@ -2396,13 +2429,13 @@ class AnimationTrigger {
|
|
2396
2429
|
this._normalizer = _normalizer;
|
2397
2430
|
this.transitionFactories = [];
|
2398
2431
|
this.states = new Map();
|
2399
|
-
ast.states.forEach(ast => {
|
2432
|
+
ast.states.forEach((ast) => {
|
2400
2433
|
const defaultParams = (ast.options && ast.options.params) || {};
|
2401
2434
|
this.states.set(ast.name, new AnimationStateStyles(ast.style, defaultParams, _normalizer));
|
2402
2435
|
});
|
2403
2436
|
balanceProperties(this.states, 'true', '1');
|
2404
2437
|
balanceProperties(this.states, 'false', '0');
|
2405
|
-
ast.transitions.forEach(ast => {
|
2438
|
+
ast.transitions.forEach((ast) => {
|
2406
2439
|
this.transitionFactories.push(new AnimationTransitionFactory(name, ast, this.states));
|
2407
2440
|
});
|
2408
2441
|
this.fallbackTransition = createFallbackTransition(name, this.states, this._normalizer);
|
@@ -2411,7 +2444,7 @@ class AnimationTrigger {
|
|
2411
2444
|
return this.ast.queryCount > 0;
|
2412
2445
|
}
|
2413
2446
|
matchTransition(currentState, nextState, element, params) {
|
2414
|
-
const entry = this.transitionFactories.find(f => f.match(currentState, nextState, element, params));
|
2447
|
+
const entry = this.transitionFactories.find((f) => f.match(currentState, nextState, element, params));
|
2415
2448
|
return entry || null;
|
2416
2449
|
}
|
2417
2450
|
matchStyles(currentState, params, errors) {
|
@@ -2427,7 +2460,7 @@ function createFallbackTransition(triggerName, states, normalizer) {
|
|
2427
2460
|
matchers,
|
2428
2461
|
options: null,
|
2429
2462
|
queryCount: 0,
|
2430
|
-
depCount: 0
|
2463
|
+
depCount: 0,
|
2431
2464
|
};
|
2432
2465
|
return new AnimationTransitionFactory(triggerName, transition, states);
|
2433
2466
|
}
|
@@ -2478,9 +2511,9 @@ class TimelineAnimationEngine {
|
|
2478
2511
|
const autoStylesMap = new Map();
|
2479
2512
|
if (ast) {
|
2480
2513
|
instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, new Map(), new Map(), options, EMPTY_INSTRUCTION_MAP, errors);
|
2481
|
-
instructions.forEach(inst => {
|
2514
|
+
instructions.forEach((inst) => {
|
2482
2515
|
const styles = getOrSetDefaultValue(autoStylesMap, inst.element, new Map());
|
2483
|
-
inst.postStyleProps.forEach(prop => styles.set(prop, null));
|
2516
|
+
inst.postStyleProps.forEach((prop) => styles.set(prop, null));
|
2484
2517
|
});
|
2485
2518
|
}
|
2486
2519
|
else {
|
@@ -2495,7 +2528,7 @@ class TimelineAnimationEngine {
|
|
2495
2528
|
styles.set(prop, this._driver.computeStyle(element, prop, AUTO_STYLE));
|
2496
2529
|
});
|
2497
2530
|
});
|
2498
|
-
const players = instructions.map(i => {
|
2531
|
+
const players = instructions.map((i) => {
|
2499
2532
|
const styles = autoStylesMap.get(i.element);
|
2500
2533
|
return this._buildPlayer(i, new Map(), styles);
|
2501
2534
|
});
|
@@ -2579,14 +2612,14 @@ const NULL_REMOVAL_STATE = {
|
|
2579
2612
|
setForRemoval: false,
|
2580
2613
|
setForMove: false,
|
2581
2614
|
hasAnimation: false,
|
2582
|
-
removedBeforeQueried: false
|
2615
|
+
removedBeforeQueried: false,
|
2583
2616
|
};
|
2584
2617
|
const NULL_REMOVED_QUERIED_STATE = {
|
2585
2618
|
namespaceId: '',
|
2586
2619
|
setForMove: false,
|
2587
2620
|
setForRemoval: false,
|
2588
2621
|
hasAnimation: false,
|
2589
|
-
removedBeforeQueried: true
|
2622
|
+
removedBeforeQueried: true,
|
2590
2623
|
};
|
2591
2624
|
const REMOVAL_FLAG = '__ng_removed';
|
2592
2625
|
class StateValue {
|
@@ -2614,7 +2647,7 @@ class StateValue {
|
|
2614
2647
|
const newParams = options.params;
|
2615
2648
|
if (newParams) {
|
2616
2649
|
const oldParams = this.options.params;
|
2617
|
-
Object.keys(newParams).forEach(prop => {
|
2650
|
+
Object.keys(newParams).forEach((prop) => {
|
2618
2651
|
if (oldParams[prop] == null) {
|
2619
2652
|
oldParams[prop] = newParams[prop];
|
2620
2653
|
}
|
@@ -2694,7 +2727,7 @@ class AnimationTransitionNamespace {
|
|
2694
2727
|
if (!triggersWithStates) {
|
2695
2728
|
addClass(element, NG_TRIGGER_CLASSNAME);
|
2696
2729
|
addClass(element, NG_TRIGGER_CLASSNAME + '-' + triggerName);
|
2697
|
-
this._engine.statesByElement.set(element, triggersWithStates = new Map());
|
2730
|
+
this._engine.statesByElement.set(element, (triggersWithStates = new Map()));
|
2698
2731
|
}
|
2699
2732
|
let fromState = triggersWithStates.get(triggerName);
|
2700
2733
|
const toState = new StateValue(value, this.id);
|
@@ -2733,7 +2766,7 @@ class AnimationTransitionNamespace {
|
|
2733
2766
|
return;
|
2734
2767
|
}
|
2735
2768
|
const playersOnElement = getOrSetDefaultValue(this._engine.playersByElement, element, []);
|
2736
|
-
playersOnElement.forEach(player => {
|
2769
|
+
playersOnElement.forEach((player) => {
|
2737
2770
|
// only remove the player if it is queued on the EXACT same trigger/namespace
|
2738
2771
|
// we only also deal with queued players here because if the animation has
|
2739
2772
|
// started then we want to keep the player alive until the flush happens
|
@@ -2751,7 +2784,15 @@ class AnimationTransitionNamespace {
|
|
2751
2784
|
isFallbackTransition = true;
|
2752
2785
|
}
|
2753
2786
|
this._engine.totalQueuedPlayers++;
|
2754
|
-
this._queue.push({
|
2787
|
+
this._queue.push({
|
2788
|
+
element,
|
2789
|
+
triggerName,
|
2790
|
+
transition,
|
2791
|
+
fromState,
|
2792
|
+
toState,
|
2793
|
+
player,
|
2794
|
+
isFallbackTransition,
|
2795
|
+
});
|
2755
2796
|
if (!isFallbackTransition) {
|
2756
2797
|
addClass(element, QUEUED_CLASSNAME);
|
2757
2798
|
player.onStart(() => {
|
@@ -2777,9 +2818,9 @@ class AnimationTransitionNamespace {
|
|
2777
2818
|
}
|
2778
2819
|
deregister(name) {
|
2779
2820
|
this._triggers.delete(name);
|
2780
|
-
this._engine.statesByElement.forEach(stateMap => stateMap.delete(name));
|
2821
|
+
this._engine.statesByElement.forEach((stateMap) => stateMap.delete(name));
|
2781
2822
|
this._elementListeners.forEach((listeners, element) => {
|
2782
|
-
this._elementListeners.set(element, listeners.filter(entry => {
|
2823
|
+
this._elementListeners.set(element, listeners.filter((entry) => {
|
2783
2824
|
return entry.name != name;
|
2784
2825
|
}));
|
2785
2826
|
});
|
@@ -2789,7 +2830,7 @@ class AnimationTransitionNamespace {
|
|
2789
2830
|
this._elementListeners.delete(element);
|
2790
2831
|
const elementPlayers = this._engine.playersByElement.get(element);
|
2791
2832
|
if (elementPlayers) {
|
2792
|
-
elementPlayers.forEach(player => player.destroy());
|
2833
|
+
elementPlayers.forEach((player) => player.destroy());
|
2793
2834
|
this._engine.playersByElement.delete(element);
|
2794
2835
|
}
|
2795
2836
|
}
|
@@ -2798,14 +2839,14 @@ class AnimationTransitionNamespace {
|
|
2798
2839
|
// emulate a leave animation for all inner nodes within this node.
|
2799
2840
|
// If there are no animations found for any of the nodes then clear the cache
|
2800
2841
|
// for the element.
|
2801
|
-
elements.forEach(elm => {
|
2842
|
+
elements.forEach((elm) => {
|
2802
2843
|
// this means that an inner remove() operation has already kicked off
|
2803
2844
|
// the animation on this element...
|
2804
2845
|
if (elm[REMOVAL_FLAG])
|
2805
2846
|
return;
|
2806
2847
|
const namespaces = this._engine.fetchNamespacesByElement(elm);
|
2807
2848
|
if (namespaces.size) {
|
2808
|
-
namespaces.forEach(ns => ns.triggerLeaveAnimation(elm, context, false, true));
|
2849
|
+
namespaces.forEach((ns) => ns.triggerLeaveAnimation(elm, context, false, true));
|
2809
2850
|
}
|
2810
2851
|
else {
|
2811
2852
|
this.clearElementCache(elm);
|
@@ -2813,7 +2854,7 @@ class AnimationTransitionNamespace {
|
|
2813
2854
|
});
|
2814
2855
|
// If the child elements were removed along with the parent, their animations might not
|
2815
2856
|
// have completed. Clear all the elements from the cache so we don't end up with a memory leak.
|
2816
|
-
this._engine.afterFlushAnimationsDone(() => elements.forEach(elm => this.clearElementCache(elm)));
|
2857
|
+
this._engine.afterFlushAnimationsDone(() => elements.forEach((elm) => this.clearElementCache(elm)));
|
2817
2858
|
}
|
2818
2859
|
triggerLeaveAnimation(element, context, destroyAfterComplete, defaultToFallback) {
|
2819
2860
|
const triggerStates = this._engine.statesByElement.get(element);
|
@@ -2848,7 +2889,7 @@ class AnimationTransitionNamespace {
|
|
2848
2889
|
// by an earlier flush (or there are no listeners at all to track the leave).
|
2849
2890
|
if (listeners && elementStates) {
|
2850
2891
|
const visitedTriggers = new Set();
|
2851
|
-
listeners.forEach(listener => {
|
2892
|
+
listeners.forEach((listener) => {
|
2852
2893
|
const triggerName = listener.name;
|
2853
2894
|
if (visitedTriggers.has(triggerName))
|
2854
2895
|
return;
|
@@ -2866,7 +2907,7 @@ class AnimationTransitionNamespace {
|
|
2866
2907
|
fromState,
|
2867
2908
|
toState,
|
2868
2909
|
player,
|
2869
|
-
isFallbackTransition: true
|
2910
|
+
isFallbackTransition: true,
|
2870
2911
|
});
|
2871
2912
|
});
|
2872
2913
|
}
|
@@ -2883,7 +2924,9 @@ class AnimationTransitionNamespace {
|
|
2883
2924
|
// removal is delayed until that player has completed
|
2884
2925
|
let containsPotentialParentTransition = false;
|
2885
2926
|
if (engine.totalAnimations) {
|
2886
|
-
const currentPlayers = engine.players.length
|
2927
|
+
const currentPlayers = engine.players.length
|
2928
|
+
? engine.playersByQueriedElement.get(element)
|
2929
|
+
: [];
|
2887
2930
|
// when this `if statement` does not continue forward it means that
|
2888
2931
|
// a previous animation query has selected the current element and
|
2889
2932
|
// is animating it. In this situation want to continue forwards and
|
@@ -2893,7 +2936,7 @@ class AnimationTransitionNamespace {
|
|
2893
2936
|
}
|
2894
2937
|
else {
|
2895
2938
|
let parent = element;
|
2896
|
-
while (parent = parent.parentNode) {
|
2939
|
+
while ((parent = parent.parentNode)) {
|
2897
2940
|
const triggers = engine.statesByElement.get(parent);
|
2898
2941
|
if (triggers) {
|
2899
2942
|
containsPotentialParentTransition = true;
|
@@ -2928,7 +2971,7 @@ class AnimationTransitionNamespace {
|
|
2928
2971
|
}
|
2929
2972
|
drainQueuedTransitions(microtaskId) {
|
2930
2973
|
const instructions = [];
|
2931
|
-
this._queue.forEach(entry => {
|
2974
|
+
this._queue.forEach((entry) => {
|
2932
2975
|
const player = entry.player;
|
2933
2976
|
if (player.destroyed)
|
2934
2977
|
return;
|
@@ -2967,7 +3010,7 @@ class AnimationTransitionNamespace {
|
|
2967
3010
|
});
|
2968
3011
|
}
|
2969
3012
|
destroy(context) {
|
2970
|
-
this.players.forEach(p => p.destroy());
|
3013
|
+
this.players.forEach((p) => p.destroy());
|
2971
3014
|
this._signalRemovalForInnerTriggers(this.hostElement, context);
|
2972
3015
|
}
|
2973
3016
|
}
|
@@ -2976,10 +3019,11 @@ class TransitionAnimationEngine {
|
|
2976
3019
|
_onRemovalComplete(element, context) {
|
2977
3020
|
this.onRemovalComplete(element, context);
|
2978
3021
|
}
|
2979
|
-
constructor(bodyNode, driver, _normalizer) {
|
3022
|
+
constructor(bodyNode, driver, _normalizer, scheduler) {
|
2980
3023
|
this.bodyNode = bodyNode;
|
2981
3024
|
this.driver = driver;
|
2982
3025
|
this._normalizer = _normalizer;
|
3026
|
+
this.scheduler = scheduler;
|
2983
3027
|
this.players = [];
|
2984
3028
|
this.newHostElements = new Map();
|
2985
3029
|
this.playersByElement = new Map();
|
@@ -3000,8 +3044,8 @@ class TransitionAnimationEngine {
|
|
3000
3044
|
}
|
3001
3045
|
get queuedPlayers() {
|
3002
3046
|
const players = [];
|
3003
|
-
this._namespaceList.forEach(ns => {
|
3004
|
-
ns.players.forEach(player => {
|
3047
|
+
this._namespaceList.forEach((ns) => {
|
3048
|
+
ns.players.forEach((player) => {
|
3005
3049
|
if (player.queued) {
|
3006
3050
|
players.push(player);
|
3007
3051
|
}
|
@@ -3026,7 +3070,7 @@ class TransitionAnimationEngine {
|
|
3026
3070
|
// is a renderer then the set data-structure will normalize the entry
|
3027
3071
|
this.collectEnterElement(hostElement);
|
3028
3072
|
}
|
3029
|
-
return this._namespaceLookup[namespaceId] = ns;
|
3073
|
+
return (this._namespaceLookup[namespaceId] = ns);
|
3030
3074
|
}
|
3031
3075
|
_balanceNamespaceList(ns, hostElement) {
|
3032
3076
|
const namespaceList = this._namespaceList;
|
@@ -3174,6 +3218,7 @@ class TransitionAnimationEngine {
|
|
3174
3218
|
}
|
3175
3219
|
removeNode(namespaceId, element, context) {
|
3176
3220
|
if (isElementNode(element)) {
|
3221
|
+
this.scheduler?.notify();
|
3177
3222
|
const ns = namespaceId ? this._fetchNamespace(namespaceId) : null;
|
3178
3223
|
if (ns) {
|
3179
3224
|
ns.removeNode(element, context);
|
@@ -3197,7 +3242,7 @@ class TransitionAnimationEngine {
|
|
3197
3242
|
setForRemoval: context,
|
3198
3243
|
hasAnimation,
|
3199
3244
|
removedBeforeQueried: false,
|
3200
|
-
previousTriggersValues
|
3245
|
+
previousTriggersValues,
|
3201
3246
|
};
|
3202
3247
|
}
|
3203
3248
|
listen(namespaceId, element, name, phase, callback) {
|
@@ -3211,16 +3256,16 @@ class TransitionAnimationEngine {
|
|
3211
3256
|
}
|
3212
3257
|
destroyInnerAnimations(containerElement) {
|
3213
3258
|
let elements = this.driver.query(containerElement, NG_TRIGGER_SELECTOR, true);
|
3214
|
-
elements.forEach(element => this.destroyActiveAnimationsForElement(element));
|
3259
|
+
elements.forEach((element) => this.destroyActiveAnimationsForElement(element));
|
3215
3260
|
if (this.playersByQueriedElement.size == 0)
|
3216
3261
|
return;
|
3217
3262
|
elements = this.driver.query(containerElement, NG_ANIMATING_SELECTOR, true);
|
3218
|
-
elements.forEach(element => this.finishActiveQueriedAnimationOnElement(element));
|
3263
|
+
elements.forEach((element) => this.finishActiveQueriedAnimationOnElement(element));
|
3219
3264
|
}
|
3220
3265
|
destroyActiveAnimationsForElement(element) {
|
3221
3266
|
const players = this.playersByElement.get(element);
|
3222
3267
|
if (players) {
|
3223
|
-
players.forEach(player => {
|
3268
|
+
players.forEach((player) => {
|
3224
3269
|
// special case for when an element is set for destruction, but hasn't started.
|
3225
3270
|
// in this situation we want to delay the destruction until the flush occurs
|
3226
3271
|
// so that any event listeners attached to the player are triggered.
|
@@ -3236,11 +3281,11 @@ class TransitionAnimationEngine {
|
|
3236
3281
|
finishActiveQueriedAnimationOnElement(element) {
|
3237
3282
|
const players = this.playersByQueriedElement.get(element);
|
3238
3283
|
if (players) {
|
3239
|
-
players.forEach(player => player.finish());
|
3284
|
+
players.forEach((player) => player.finish());
|
3240
3285
|
}
|
3241
3286
|
}
|
3242
3287
|
whenRenderingDone() {
|
3243
|
-
return new Promise(resolve => {
|
3288
|
+
return new Promise((resolve) => {
|
3244
3289
|
if (this.players.length) {
|
3245
3290
|
return optimizeGroupPlayer(this.players).onDone(() => resolve());
|
3246
3291
|
}
|
@@ -3266,7 +3311,7 @@ class TransitionAnimationEngine {
|
|
3266
3311
|
if (element.classList?.contains(DISABLED_CLASSNAME)) {
|
3267
3312
|
this.markElementAsDisabled(element, false);
|
3268
3313
|
}
|
3269
|
-
this.driver.query(element, DISABLED_SELECTOR, true).forEach(node => {
|
3314
|
+
this.driver.query(element, DISABLED_SELECTOR, true).forEach((node) => {
|
3270
3315
|
this.markElementAsDisabled(node, false);
|
3271
3316
|
});
|
3272
3317
|
}
|
@@ -3303,7 +3348,7 @@ class TransitionAnimationEngine {
|
|
3303
3348
|
this.totalQueuedPlayers = 0;
|
3304
3349
|
this.collectedEnterElements.length = 0;
|
3305
3350
|
this.collectedLeaveElements.length = 0;
|
3306
|
-
this._flushFns.forEach(fn => fn());
|
3351
|
+
this._flushFns.forEach((fn) => fn());
|
3307
3352
|
this._flushFns = [];
|
3308
3353
|
if (this._whenQuietFns.length) {
|
3309
3354
|
// we move these over to a variable so that
|
@@ -3313,11 +3358,11 @@ class TransitionAnimationEngine {
|
|
3313
3358
|
this._whenQuietFns = [];
|
3314
3359
|
if (players.length) {
|
3315
3360
|
optimizeGroupPlayer(players).onDone(() => {
|
3316
|
-
quietFns.forEach(fn => fn());
|
3361
|
+
quietFns.forEach((fn) => fn());
|
3317
3362
|
});
|
3318
3363
|
}
|
3319
3364
|
else {
|
3320
|
-
quietFns.forEach(fn => fn());
|
3365
|
+
quietFns.forEach((fn) => fn());
|
3321
3366
|
}
|
3322
3367
|
}
|
3323
3368
|
}
|
@@ -3333,7 +3378,7 @@ class TransitionAnimationEngine {
|
|
3333
3378
|
const allPreStyleElements = new Map();
|
3334
3379
|
const allPostStyleElements = new Map();
|
3335
3380
|
const disabledElementsSet = new Set();
|
3336
|
-
this.disabledNodes.forEach(node => {
|
3381
|
+
this.disabledNodes.forEach((node) => {
|
3337
3382
|
disabledElementsSet.add(node);
|
3338
3383
|
const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
|
3339
3384
|
for (let i = 0; i < nodesThatAreDisabled.length; i++) {
|
@@ -3351,7 +3396,7 @@ class TransitionAnimationEngine {
|
|
3351
3396
|
enterNodeMap.forEach((nodes, root) => {
|
3352
3397
|
const className = ENTER_CLASSNAME + i++;
|
3353
3398
|
enterNodeMapIds.set(root, className);
|
3354
|
-
nodes.forEach(node => addClass(node, className));
|
3399
|
+
nodes.forEach((node) => addClass(node, className));
|
3355
3400
|
});
|
3356
3401
|
const allLeaveNodes = [];
|
3357
3402
|
const mergedLeaveNodes = new Set();
|
@@ -3363,7 +3408,9 @@ class TransitionAnimationEngine {
|
|
3363
3408
|
allLeaveNodes.push(element);
|
3364
3409
|
mergedLeaveNodes.add(element);
|
3365
3410
|
if (details.hasAnimation) {
|
3366
|
-
this.driver
|
3411
|
+
this.driver
|
3412
|
+
.query(element, STAR_SELECTOR, true)
|
3413
|
+
.forEach((elm) => mergedLeaveNodes.add(elm));
|
3367
3414
|
}
|
3368
3415
|
else {
|
3369
3416
|
leaveNodesWithoutAnimations.add(element);
|
@@ -3375,18 +3422,18 @@ class TransitionAnimationEngine {
|
|
3375
3422
|
leaveNodeMap.forEach((nodes, root) => {
|
3376
3423
|
const className = LEAVE_CLASSNAME + i++;
|
3377
3424
|
leaveNodeMapIds.set(root, className);
|
3378
|
-
nodes.forEach(node => addClass(node, className));
|
3425
|
+
nodes.forEach((node) => addClass(node, className));
|
3379
3426
|
});
|
3380
3427
|
cleanupFns.push(() => {
|
3381
3428
|
enterNodeMap.forEach((nodes, root) => {
|
3382
3429
|
const className = enterNodeMapIds.get(root);
|
3383
|
-
nodes.forEach(node => removeClass(node, className));
|
3430
|
+
nodes.forEach((node) => removeClass(node, className));
|
3384
3431
|
});
|
3385
3432
|
leaveNodeMap.forEach((nodes, root) => {
|
3386
3433
|
const className = leaveNodeMapIds.get(root);
|
3387
|
-
nodes.forEach(node => removeClass(node, className));
|
3434
|
+
nodes.forEach((node) => removeClass(node, className));
|
3388
3435
|
});
|
3389
|
-
allLeaveNodes.forEach(element => {
|
3436
|
+
allLeaveNodes.forEach((element) => {
|
3390
3437
|
this.processLeaveNode(element);
|
3391
3438
|
});
|
3392
3439
|
});
|
@@ -3394,7 +3441,7 @@ class TransitionAnimationEngine {
|
|
3394
3441
|
const erroneousTransitions = [];
|
3395
3442
|
for (let i = this._namespaceList.length - 1; i >= 0; i--) {
|
3396
3443
|
const ns = this._namespaceList[i];
|
3397
|
-
ns.drainQueuedTransitions(microtaskId).forEach(entry => {
|
3444
|
+
ns.drainQueuedTransitions(microtaskId).forEach((entry) => {
|
3398
3445
|
const player = entry.player;
|
3399
3446
|
const element = entry.element;
|
3400
3447
|
allPlayers.push(player);
|
@@ -3452,7 +3499,7 @@ class TransitionAnimationEngine {
|
|
3452
3499
|
// important in order to prevent extra initialization styles from being
|
3453
3500
|
// required by the user for the animation.
|
3454
3501
|
const timelines = [];
|
3455
|
-
instruction.timelines.forEach(tl => {
|
3502
|
+
instruction.timelines.forEach((tl) => {
|
3456
3503
|
tl.stretchStartingKeyframe = true;
|
3457
3504
|
if (!this.disabledNodes.has(tl.element)) {
|
3458
3505
|
timelines.push(tl);
|
@@ -3462,12 +3509,12 @@ class TransitionAnimationEngine {
|
|
3462
3509
|
subTimelines.append(element, instruction.timelines);
|
3463
3510
|
const tuple = { instruction, player, element };
|
3464
3511
|
queuedInstructions.push(tuple);
|
3465
|
-
instruction.queriedElements.forEach(element => getOrSetDefaultValue(queriedElements, element, []).push(player));
|
3512
|
+
instruction.queriedElements.forEach((element) => getOrSetDefaultValue(queriedElements, element, []).push(player));
|
3466
3513
|
instruction.preStyleProps.forEach((stringMap, element) => {
|
3467
3514
|
if (stringMap.size) {
|
3468
3515
|
let setVal = allPreStyleElements.get(element);
|
3469
3516
|
if (!setVal) {
|
3470
|
-
allPreStyleElements.set(element, setVal = new Set());
|
3517
|
+
allPreStyleElements.set(element, (setVal = new Set()));
|
3471
3518
|
}
|
3472
3519
|
stringMap.forEach((_, prop) => setVal.add(prop));
|
3473
3520
|
}
|
@@ -3475,7 +3522,7 @@ class TransitionAnimationEngine {
|
|
3475
3522
|
instruction.postStyleProps.forEach((stringMap, element) => {
|
3476
3523
|
let setVal = allPostStyleElements.get(element);
|
3477
3524
|
if (!setVal) {
|
3478
|
-
allPostStyleElements.set(element, setVal = new Set());
|
3525
|
+
allPostStyleElements.set(element, (setVal = new Set()));
|
3479
3526
|
}
|
3480
3527
|
stringMap.forEach((_, prop) => setVal.add(prop));
|
3481
3528
|
});
|
@@ -3483,10 +3530,10 @@ class TransitionAnimationEngine {
|
|
3483
3530
|
}
|
3484
3531
|
if (erroneousTransitions.length) {
|
3485
3532
|
const errors = [];
|
3486
|
-
erroneousTransitions.forEach(instruction => {
|
3533
|
+
erroneousTransitions.forEach((instruction) => {
|
3487
3534
|
errors.push(transitionFailed(instruction.triggerName, instruction.errors));
|
3488
3535
|
});
|
3489
|
-
allPlayers.forEach(player => player.destroy());
|
3536
|
+
allPlayers.forEach((player) => player.destroy());
|
3490
3537
|
this.reportError(errors);
|
3491
3538
|
}
|
3492
3539
|
const allPreviousPlayersMap = new Map();
|
@@ -3495,17 +3542,17 @@ class TransitionAnimationEngine {
|
|
3495
3542
|
// the players are built and in doing so we can use it to efficiently
|
3496
3543
|
// figure out if a sub player is skipped due to a parent player having priority.
|
3497
3544
|
const animationElementMap = new Map();
|
3498
|
-
queuedInstructions.forEach(entry => {
|
3545
|
+
queuedInstructions.forEach((entry) => {
|
3499
3546
|
const element = entry.element;
|
3500
3547
|
if (subTimelines.has(element)) {
|
3501
3548
|
animationElementMap.set(element, element);
|
3502
3549
|
this._beforeAnimationBuild(entry.player.namespaceId, entry.instruction, allPreviousPlayersMap);
|
3503
3550
|
}
|
3504
3551
|
});
|
3505
|
-
skippedPlayers.forEach(player => {
|
3552
|
+
skippedPlayers.forEach((player) => {
|
3506
3553
|
const element = player.element;
|
3507
3554
|
const previousPlayers = this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
|
3508
|
-
previousPlayers.forEach(prevPlayer => {
|
3555
|
+
previousPlayers.forEach((prevPlayer) => {
|
3509
3556
|
getOrSetDefaultValue(allPreviousPlayersMap, element, []).push(prevPlayer);
|
3510
3557
|
prevPlayer.destroy();
|
3511
3558
|
});
|
@@ -3517,13 +3564,13 @@ class TransitionAnimationEngine {
|
|
3517
3564
|
// backwards compatibility (* is also filled in by default in many places).
|
3518
3565
|
// Otherwise * styles will return an empty value or "auto" since the element
|
3519
3566
|
// passed to getComputedStyle will not be visible (since * === destination)
|
3520
|
-
const replaceNodes = allLeaveNodes.filter(node => {
|
3567
|
+
const replaceNodes = allLeaveNodes.filter((node) => {
|
3521
3568
|
return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
|
3522
3569
|
});
|
3523
3570
|
// POST STAGE: fill the * styles
|
3524
3571
|
const postStylesMap = new Map();
|
3525
3572
|
const allLeaveQueriedNodes = cloakAndComputeStyles(postStylesMap, this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);
|
3526
|
-
allLeaveQueriedNodes.forEach(node => {
|
3573
|
+
allLeaveQueriedNodes.forEach((node) => {
|
3527
3574
|
if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) {
|
3528
3575
|
replaceNodes.push(node);
|
3529
3576
|
}
|
@@ -3533,7 +3580,7 @@ class TransitionAnimationEngine {
|
|
3533
3580
|
enterNodeMap.forEach((nodes, root) => {
|
3534
3581
|
cloakAndComputeStyles(preStylesMap, this.driver, new Set(nodes), allPreStyleElements, ɵPRE_STYLE);
|
3535
3582
|
});
|
3536
|
-
replaceNodes.forEach(node => {
|
3583
|
+
replaceNodes.forEach((node) => {
|
3537
3584
|
const post = postStylesMap.get(node);
|
3538
3585
|
const pre = preStylesMap.get(node);
|
3539
3586
|
postStylesMap.set(node, new Map([...(post?.entries() ?? []), ...(pre?.entries() ?? [])]));
|
@@ -3541,7 +3588,7 @@ class TransitionAnimationEngine {
|
|
3541
3588
|
const rootPlayers = [];
|
3542
3589
|
const subPlayers = [];
|
3543
3590
|
const NO_PARENT_ANIMATION_ELEMENT_DETECTED = {};
|
3544
|
-
queuedInstructions.forEach(entry => {
|
3591
|
+
queuedInstructions.forEach((entry) => {
|
3545
3592
|
const { element, player, instruction } = entry;
|
3546
3593
|
// this means that it was never consumed by a parent animation which
|
3547
3594
|
// means that it is independent and therefore should be set for animation
|
@@ -3563,7 +3610,7 @@ class TransitionAnimationEngine {
|
|
3563
3610
|
if (animationElementMap.size > 1) {
|
3564
3611
|
let elm = element;
|
3565
3612
|
const parentsToAdd = [];
|
3566
|
-
while (elm = elm.parentNode) {
|
3613
|
+
while ((elm = elm.parentNode)) {
|
3567
3614
|
const detectedParent = animationElementMap.get(elm);
|
3568
3615
|
if (detectedParent) {
|
3569
3616
|
parentWithAnimation = detectedParent;
|
@@ -3571,7 +3618,7 @@ class TransitionAnimationEngine {
|
|
3571
3618
|
}
|
3572
3619
|
parentsToAdd.push(elm);
|
3573
3620
|
}
|
3574
|
-
parentsToAdd.forEach(parent => animationElementMap.set(parent, parentWithAnimation));
|
3621
|
+
parentsToAdd.forEach((parent) => animationElementMap.set(parent, parentWithAnimation));
|
3575
3622
|
}
|
3576
3623
|
const innerPlayer = this._buildAnimation(player.namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap, postStylesMap);
|
3577
3624
|
player.setRealPlayer(innerPlayer);
|
@@ -3599,7 +3646,7 @@ class TransitionAnimationEngine {
|
|
3599
3646
|
}
|
3600
3647
|
});
|
3601
3648
|
// find all of the sub players' corresponding inner animation players
|
3602
|
-
subPlayers.forEach(player => {
|
3649
|
+
subPlayers.forEach((player) => {
|
3603
3650
|
// even if no players are found for a sub animation it
|
3604
3651
|
// will still complete itself after the next tick since it's Noop
|
3605
3652
|
const playersForElement = skippedPlayersMap.get(player.element);
|
@@ -3611,7 +3658,7 @@ class TransitionAnimationEngine {
|
|
3611
3658
|
// the reason why we don't actually play the animation is
|
3612
3659
|
// because all that a skipped player is designed to do is to
|
3613
3660
|
// fire the start/done transition callback events
|
3614
|
-
skippedPlayers.forEach(player => {
|
3661
|
+
skippedPlayers.forEach((player) => {
|
3615
3662
|
if (player.parentPlayer) {
|
3616
3663
|
player.syncPlayerEvents(player.parentPlayer);
|
3617
3664
|
}
|
@@ -3648,7 +3695,7 @@ class TransitionAnimationEngine {
|
|
3648
3695
|
}
|
3649
3696
|
}
|
3650
3697
|
}
|
3651
|
-
const activePlayers = players.filter(p => !p.destroyed);
|
3698
|
+
const activePlayers = players.filter((p) => !p.destroyed);
|
3652
3699
|
if (activePlayers.length) {
|
3653
3700
|
removeNodesAfterAnimationDone(this, element, activePlayers);
|
3654
3701
|
}
|
@@ -3658,7 +3705,7 @@ class TransitionAnimationEngine {
|
|
3658
3705
|
}
|
3659
3706
|
// this is required so the cleanup method doesn't remove them
|
3660
3707
|
allLeaveNodes.length = 0;
|
3661
|
-
rootPlayers.forEach(player => {
|
3708
|
+
rootPlayers.forEach((player) => {
|
3662
3709
|
this.players.push(player);
|
3663
3710
|
player.onDone(() => {
|
3664
3711
|
player.destroy();
|
@@ -3687,7 +3734,7 @@ class TransitionAnimationEngine {
|
|
3687
3734
|
const elementPlayers = this.playersByElement.get(element);
|
3688
3735
|
if (elementPlayers) {
|
3689
3736
|
const isRemovalAnimation = !toStateValue || toStateValue == VOID_VALUE;
|
3690
|
-
elementPlayers.forEach(player => {
|
3737
|
+
elementPlayers.forEach((player) => {
|
3691
3738
|
if (player.queued)
|
3692
3739
|
return;
|
3693
3740
|
if (!isRemovalAnimation && player.triggerName != triggerName)
|
@@ -3697,7 +3744,7 @@ class TransitionAnimationEngine {
|
|
3697
3744
|
}
|
3698
3745
|
}
|
3699
3746
|
if (namespaceId || triggerName) {
|
3700
|
-
players = players.filter(player => {
|
3747
|
+
players = players.filter((player) => {
|
3701
3748
|
if (namespaceId && namespaceId != player.namespaceId)
|
3702
3749
|
return false;
|
3703
3750
|
if (triggerName && triggerName != player.triggerName)
|
@@ -3712,14 +3759,18 @@ class TransitionAnimationEngine {
|
|
3712
3759
|
const rootElement = instruction.element;
|
3713
3760
|
// when a removal animation occurs, ALL previous players are collected
|
3714
3761
|
// and destroyed (even if they are outside of the current namespace)
|
3715
|
-
const targetNameSpaceId = instruction.isRemovalTransition
|
3716
|
-
|
3762
|
+
const targetNameSpaceId = instruction.isRemovalTransition
|
3763
|
+
? undefined
|
3764
|
+
: namespaceId;
|
3765
|
+
const targetTriggerName = instruction.isRemovalTransition
|
3766
|
+
? undefined
|
3767
|
+
: triggerName;
|
3717
3768
|
for (const timelineInstruction of instruction.timelines) {
|
3718
3769
|
const element = timelineInstruction.element;
|
3719
3770
|
const isQueriedElement = element !== rootElement;
|
3720
3771
|
const players = getOrSetDefaultValue(allPreviousPlayersMap, element, []);
|
3721
3772
|
const previousPlayers = this._getPreviousPlayers(element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState);
|
3722
|
-
previousPlayers.forEach(player => {
|
3773
|
+
previousPlayers.forEach((player) => {
|
3723
3774
|
const realPlayer = player.getRealPlayer();
|
3724
3775
|
if (realPlayer.beforeDestroy) {
|
3725
3776
|
realPlayer.beforeDestroy();
|
@@ -3740,7 +3791,7 @@ class TransitionAnimationEngine {
|
|
3740
3791
|
const allQueriedPlayers = [];
|
3741
3792
|
const allConsumedElements = new Set();
|
3742
3793
|
const allSubElements = new Set();
|
3743
|
-
const allNewPlayers = instruction.timelines.map(timelineInstruction => {
|
3794
|
+
const allNewPlayers = instruction.timelines.map((timelineInstruction) => {
|
3744
3795
|
const element = timelineInstruction.element;
|
3745
3796
|
allConsumedElements.add(element);
|
3746
3797
|
// FIXME (matsko): make sure to-be-removed animations are removed properly
|
@@ -3748,9 +3799,7 @@ class TransitionAnimationEngine {
|
|
3748
3799
|
if (details && details.removedBeforeQueried)
|
3749
3800
|
return new NoopAnimationPlayer(timelineInstruction.duration, timelineInstruction.delay);
|
3750
3801
|
const isQueriedElement = element !== rootElement;
|
3751
|
-
const previousPlayers = flattenGroupPlayers((allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY)
|
3752
|
-
.map(p => p.getRealPlayer()))
|
3753
|
-
.filter(p => {
|
3802
|
+
const previousPlayers = flattenGroupPlayers((allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY).map((p) => p.getRealPlayer())).filter((p) => {
|
3754
3803
|
// the `element` is not apart of the AnimationPlayer definition, but
|
3755
3804
|
// Mock/WebAnimations
|
3756
3805
|
// use the element within their implementation. This will be added in Angular5 to
|
@@ -3774,19 +3823,19 @@ class TransitionAnimationEngine {
|
|
3774
3823
|
}
|
3775
3824
|
return player;
|
3776
3825
|
});
|
3777
|
-
allQueriedPlayers.forEach(player => {
|
3826
|
+
allQueriedPlayers.forEach((player) => {
|
3778
3827
|
getOrSetDefaultValue(this.playersByQueriedElement, player.element, []).push(player);
|
3779
3828
|
player.onDone(() => deleteOrUnsetInMap(this.playersByQueriedElement, player.element, player));
|
3780
3829
|
});
|
3781
|
-
allConsumedElements.forEach(element => addClass(element, NG_ANIMATING_CLASSNAME));
|
3830
|
+
allConsumedElements.forEach((element) => addClass(element, NG_ANIMATING_CLASSNAME));
|
3782
3831
|
const player = optimizeGroupPlayer(allNewPlayers);
|
3783
3832
|
player.onDestroy(() => {
|
3784
|
-
allConsumedElements.forEach(element => removeClass(element, NG_ANIMATING_CLASSNAME));
|
3833
|
+
allConsumedElements.forEach((element) => removeClass(element, NG_ANIMATING_CLASSNAME));
|
3785
3834
|
setStyles(rootElement, instruction.toStyles);
|
3786
3835
|
});
|
3787
3836
|
// this basically makes all of the callbacks for sub element animations
|
3788
3837
|
// be dependent on the upper players for when they finish
|
3789
|
-
allSubElements.forEach(element => {
|
3838
|
+
allSubElements.forEach((element) => {
|
3790
3839
|
getOrSetDefaultValue(skippedPlayersMap, element, []).push(player);
|
3791
3840
|
});
|
3792
3841
|
return player;
|
@@ -3820,7 +3869,7 @@ class TransitionAnimationPlayer {
|
|
3820
3869
|
return;
|
3821
3870
|
this._player = player;
|
3822
3871
|
this._queuedCallbacks.forEach((callbacks, phase) => {
|
3823
|
-
callbacks.forEach(callback => listenOnPlayer(player, phase, undefined, callback));
|
3872
|
+
callbacks.forEach((callback) => listenOnPlayer(player, phase, undefined, callback));
|
3824
3873
|
});
|
3825
3874
|
this._queuedCallbacks.clear();
|
3826
3875
|
this._containsRealPlayer = true;
|
@@ -3935,11 +3984,11 @@ function cloakElement(element, value) {
|
|
3935
3984
|
}
|
3936
3985
|
function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, defaultStyle) {
|
3937
3986
|
const cloakVals = [];
|
3938
|
-
elements.forEach(element => cloakVals.push(cloakElement(element)));
|
3987
|
+
elements.forEach((element) => cloakVals.push(cloakElement(element)));
|
3939
3988
|
const failedElements = [];
|
3940
3989
|
elementPropsMap.forEach((props, element) => {
|
3941
3990
|
const styles = new Map();
|
3942
|
-
props.forEach(prop => {
|
3991
|
+
props.forEach((prop) => {
|
3943
3992
|
const value = driver.computeStyle(element, prop, defaultStyle);
|
3944
3993
|
styles.set(prop, value);
|
3945
3994
|
// there is no easy way to detect this because a sub element could be removed
|
@@ -3954,7 +4003,7 @@ function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, def
|
|
3954
4003
|
// we use a index variable here since Set.forEach(a, i) does not return
|
3955
4004
|
// an index value for the closure (but instead just the value)
|
3956
4005
|
let i = 0;
|
3957
|
-
elements.forEach(element => cloakElement(element, cloakVals[i++]));
|
4006
|
+
elements.forEach((element) => cloakElement(element, cloakVals[i++]));
|
3958
4007
|
return failedElements;
|
3959
4008
|
}
|
3960
4009
|
/*
|
@@ -3969,7 +4018,7 @@ is placed into the Map[@trigger] spot.
|
|
3969
4018
|
*/
|
3970
4019
|
function buildRootMap(roots, nodes) {
|
3971
4020
|
const rootMap = new Map();
|
3972
|
-
roots.forEach(root => rootMap.set(root, []));
|
4021
|
+
roots.forEach((root) => rootMap.set(root, []));
|
3973
4022
|
if (nodes.length == 0)
|
3974
4023
|
return rootMap;
|
3975
4024
|
const NULL_NODE = 1;
|
@@ -3982,19 +4031,22 @@ function buildRootMap(roots, nodes) {
|
|
3982
4031
|
if (root)
|
3983
4032
|
return root;
|
3984
4033
|
const parent = node.parentNode;
|
3985
|
-
if (rootMap.has(parent)) {
|
4034
|
+
if (rootMap.has(parent)) {
|
4035
|
+
// ngIf inside @trigger
|
3986
4036
|
root = parent;
|
3987
4037
|
}
|
3988
|
-
else if (nodeSet.has(parent)) {
|
4038
|
+
else if (nodeSet.has(parent)) {
|
4039
|
+
// ngIf inside ngIf
|
3989
4040
|
root = NULL_NODE;
|
3990
4041
|
}
|
3991
|
-
else {
|
4042
|
+
else {
|
4043
|
+
// recurse upwards
|
3992
4044
|
root = getRoot(parent);
|
3993
4045
|
}
|
3994
4046
|
localRootMap.set(node, root);
|
3995
4047
|
return root;
|
3996
4048
|
}
|
3997
|
-
nodes.forEach(node => {
|
4049
|
+
nodes.forEach((node) => {
|
3998
4050
|
const root = getRoot(node);
|
3999
4051
|
if (root !== NULL_NODE) {
|
4000
4052
|
rootMap.get(root).push(node);
|
@@ -4045,7 +4097,7 @@ function replacePostStylesAsPre(element, allPreStyleElements, allPostStyleElemen
|
|
4045
4097
|
return false;
|
4046
4098
|
let preEntry = allPreStyleElements.get(element);
|
4047
4099
|
if (preEntry) {
|
4048
|
-
postEntry.forEach(data => preEntry.add(data));
|
4100
|
+
postEntry.forEach((data) => preEntry.add(data));
|
4049
4101
|
}
|
4050
4102
|
else {
|
4051
4103
|
allPreStyleElements.set(element, postEntry);
|
@@ -4055,13 +4107,13 @@ function replacePostStylesAsPre(element, allPreStyleElements, allPostStyleElemen
|
|
4055
4107
|
}
|
4056
4108
|
|
4057
4109
|
class AnimationEngine {
|
4058
|
-
constructor(doc, _driver, _normalizer) {
|
4110
|
+
constructor(doc, _driver, _normalizer, scheduler) {
|
4059
4111
|
this._driver = _driver;
|
4060
4112
|
this._normalizer = _normalizer;
|
4061
4113
|
this._triggerCache = {};
|
4062
4114
|
// this method is designed to be overridden by the code that uses this engine
|
4063
4115
|
this.onRemovalComplete = (element, context) => { };
|
4064
|
-
this._transitionEngine = new TransitionAnimationEngine(doc.body, _driver, _normalizer);
|
4116
|
+
this._transitionEngine = new TransitionAnimationEngine(doc.body, _driver, _normalizer, scheduler);
|
4065
4117
|
this._timelineEngine = new TimelineAnimationEngine(doc.body, _driver, _normalizer);
|
4066
4118
|
this._transitionEngine.onRemovalComplete = (element, context) => this.onRemovalComplete(element, context);
|
4067
4119
|
}
|
@@ -4120,10 +4172,7 @@ class AnimationEngine {
|
|
4120
4172
|
this._transitionEngine.flush(microtaskId);
|
4121
4173
|
}
|
4122
4174
|
get players() {
|
4123
|
-
return [
|
4124
|
-
...this._transitionEngine.players,
|
4125
|
-
...this._timelineEngine.players,
|
4126
|
-
];
|
4175
|
+
return [...this._transitionEngine.players, ...this._timelineEngine.players];
|
4127
4176
|
}
|
4128
4177
|
whenRenderingDone() {
|
4129
4178
|
return this._transitionEngine.whenRenderingDone();
|
@@ -4156,8 +4205,7 @@ function packageNonAnimatableStyles(element, styles) {
|
|
4156
4205
|
else if (styles instanceof Map) {
|
4157
4206
|
startStyles = filterNonAnimatableStyles(styles);
|
4158
4207
|
}
|
4159
|
-
return
|
4160
|
-
null;
|
4208
|
+
return startStyles || endStyles ? new SpecialCasedStyles(element, startStyles, endStyles) : null;
|
4161
4209
|
}
|
4162
4210
|
/**
|
4163
4211
|
* Designed to be executed during a keyframe-based animation to apply any special-cased styles.
|
@@ -4168,7 +4216,7 @@ function packageNonAnimatableStyles(element, styles) {
|
|
4168
4216
|
* `destroy()` is called then all styles will be removed.
|
4169
4217
|
*/
|
4170
4218
|
class SpecialCasedStyles {
|
4171
|
-
static { this.initialStylesByElement =
|
4219
|
+
static { this.initialStylesByElement = new WeakMap(); }
|
4172
4220
|
constructor(_element, _startStyles, _endStyles) {
|
4173
4221
|
this._element = _element;
|
4174
4222
|
this._startStyles = _startStyles;
|
@@ -4176,7 +4224,7 @@ class SpecialCasedStyles {
|
|
4176
4224
|
this._state = 0 /* SpecialCasedStylesState.Pending */;
|
4177
4225
|
let initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element);
|
4178
4226
|
if (!initialStyles) {
|
4179
|
-
SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = new Map());
|
4227
|
+
SpecialCasedStyles.initialStylesByElement.set(_element, (initialStyles = new Map()));
|
4180
4228
|
}
|
4181
4229
|
this._initialStyles = initialStyles;
|
4182
4230
|
}
|
@@ -4258,7 +4306,7 @@ class WebAnimationsPlayer {
|
|
4258
4306
|
_onFinish() {
|
4259
4307
|
if (!this._finished) {
|
4260
4308
|
this._finished = true;
|
4261
|
-
this._onDoneFns.forEach(fn => fn());
|
4309
|
+
this._onDoneFns.forEach((fn) => fn());
|
4262
4310
|
this._onDoneFns = [];
|
4263
4311
|
}
|
4264
4312
|
}
|
@@ -4294,7 +4342,7 @@ class WebAnimationsPlayer {
|
|
4294
4342
|
}
|
4295
4343
|
_convertKeyframesToObject(keyframes) {
|
4296
4344
|
const kfs = [];
|
4297
|
-
keyframes.forEach(frame => {
|
4345
|
+
keyframes.forEach((frame) => {
|
4298
4346
|
kfs.push(Object.fromEntries(frame));
|
4299
4347
|
});
|
4300
4348
|
return kfs;
|
@@ -4317,7 +4365,7 @@ class WebAnimationsPlayer {
|
|
4317
4365
|
play() {
|
4318
4366
|
this._buildPlayer();
|
4319
4367
|
if (!this.hasStarted()) {
|
4320
|
-
this._onStartFns.forEach(fn => fn());
|
4368
|
+
this._onStartFns.forEach((fn) => fn());
|
4321
4369
|
this._onStartFns = [];
|
4322
4370
|
this._started = true;
|
4323
4371
|
if (this._specialStyles) {
|
@@ -4366,7 +4414,7 @@ class WebAnimationsPlayer {
|
|
4366
4414
|
if (this._specialStyles) {
|
4367
4415
|
this._specialStyles.destroy();
|
4368
4416
|
}
|
4369
|
-
this._onDestroyFns.forEach(fn => fn());
|
4417
|
+
this._onDestroyFns.forEach((fn) => fn());
|
4370
4418
|
this._onDestroyFns = [];
|
4371
4419
|
}
|
4372
4420
|
}
|
@@ -4401,7 +4449,7 @@ class WebAnimationsPlayer {
|
|
4401
4449
|
/** @internal */
|
4402
4450
|
triggerCallback(phaseName) {
|
4403
4451
|
const methods = phaseName === 'start' ? this._onStartFns : this._onDoneFns;
|
4404
|
-
methods.forEach(fn => fn());
|
4452
|
+
methods.forEach((fn) => fn());
|
4405
4453
|
methods.length = 0;
|
4406
4454
|
}
|
4407
4455
|
}
|
@@ -4447,25 +4495,25 @@ class WebAnimationsDriver {
|
|
4447
4495
|
playerOptions['easing'] = easing;
|
4448
4496
|
}
|
4449
4497
|
const previousStyles = new Map();
|
4450
|
-
const previousWebAnimationPlayers = previousPlayers.filter(player => player instanceof WebAnimationsPlayer);
|
4498
|
+
const previousWebAnimationPlayers = (previousPlayers.filter((player) => player instanceof WebAnimationsPlayer));
|
4451
4499
|
if (allowPreviousPlayerStylesMerge(duration, delay)) {
|
4452
|
-
previousWebAnimationPlayers.forEach(player => {
|
4500
|
+
previousWebAnimationPlayers.forEach((player) => {
|
4453
4501
|
player.currentSnapshot.forEach((val, prop) => previousStyles.set(prop, val));
|
4454
4502
|
});
|
4455
4503
|
}
|
4456
|
-
let _keyframes = normalizeKeyframes(keyframes).map(styles => new Map(styles));
|
4504
|
+
let _keyframes = normalizeKeyframes(keyframes).map((styles) => new Map(styles));
|
4457
4505
|
_keyframes = balancePreviousStylesIntoKeyframes(element, _keyframes, previousStyles);
|
4458
4506
|
const specialStyles = packageNonAnimatableStyles(element, _keyframes);
|
4459
4507
|
return new WebAnimationsPlayer(element, _keyframes, playerOptions, specialStyles);
|
4460
4508
|
}
|
4461
4509
|
}
|
4462
4510
|
|
4463
|
-
function createEngine(type, doc) {
|
4511
|
+
function createEngine(type, doc, scheduler) {
|
4464
4512
|
// TODO: find a way to make this tree shakable.
|
4465
4513
|
if (type === 'noop') {
|
4466
|
-
return new AnimationEngine(doc, new NoopAnimationDriver(), new NoopAnimationStyleNormalizer());
|
4514
|
+
return new AnimationEngine(doc, new NoopAnimationDriver(), new NoopAnimationStyleNormalizer(), scheduler);
|
4467
4515
|
}
|
4468
|
-
return new AnimationEngine(doc, new WebAnimationsDriver(), new WebAnimationsStyleNormalizer());
|
4516
|
+
return new AnimationEngine(doc, new WebAnimationsDriver(), new WebAnimationsStyleNormalizer(), scheduler);
|
4469
4517
|
}
|
4470
4518
|
|
4471
4519
|
class Animation {
|
@@ -4483,10 +4531,12 @@ class Animation {
|
|
4483
4531
|
this._animationAst = ast;
|
4484
4532
|
}
|
4485
4533
|
buildTimelines(element, startingStyles, destinationStyles, options, subInstructions) {
|
4486
|
-
const start = Array.isArray(startingStyles)
|
4487
|
-
startingStyles
|
4488
|
-
|
4489
|
-
|
4534
|
+
const start = Array.isArray(startingStyles)
|
4535
|
+
? normalizeStyles(startingStyles)
|
4536
|
+
: startingStyles;
|
4537
|
+
const dest = Array.isArray(destinationStyles)
|
4538
|
+
? normalizeStyles(destinationStyles)
|
4539
|
+
: destinationStyles;
|
4490
4540
|
const errors = [];
|
4491
4541
|
subInstructions = subInstructions || new ElementInstructionMap();
|
4492
4542
|
const result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors);
|
@@ -4622,7 +4672,7 @@ class AnimationRenderer extends BaseAnimationRenderer {
|
|
4622
4672
|
if (name.charAt(0) != ANIMATION_PREFIX) {
|
4623
4673
|
[name, phase] = parseTriggerCallbackName(name);
|
4624
4674
|
}
|
4625
|
-
return this.engine.listen(this.namespaceId, element, name, phase, event => {
|
4675
|
+
return this.engine.listen(this.namespaceId, element, name, phase, (event) => {
|
4626
4676
|
const countId = event['_data'] || -1;
|
4627
4677
|
this.factory.scheduleListenerCallback(countId, callback, event);
|
4628
4678
|
});
|
@@ -4682,8 +4732,7 @@ class AnimationRendererFactory {
|
|
4682
4732
|
// Ensure that the renderer is removed from the cache on destroy
|
4683
4733
|
// since it may contain references to detached DOM nodes.
|
4684
4734
|
const onRendererDestroy = () => cache.delete(delegate);
|
4685
|
-
renderer =
|
4686
|
-
new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine, onRendererDestroy);
|
4735
|
+
renderer = new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine, onRendererDestroy);
|
4687
4736
|
// only cache this result when the base renderer is used
|
4688
4737
|
cache.set(delegate, renderer);
|
4689
4738
|
}
|
@@ -4726,7 +4775,7 @@ class AnimationRendererFactory {
|
|
4726
4775
|
if (animationCallbacksBuffer.length == 0) {
|
4727
4776
|
queueMicrotask(() => {
|
4728
4777
|
this._zone.run(() => {
|
4729
|
-
animationCallbacksBuffer.forEach(tuple => {
|
4778
|
+
animationCallbacksBuffer.forEach((tuple) => {
|
4730
4779
|
const [fn, data] = tuple;
|
4731
4780
|
fn(data);
|
4732
4781
|
});
|