@angular/animations 13.2.0-next.2 → 13.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animations.d.ts +1 -1
- package/browser/browser.d.ts +2 -65
- package/browser/testing/testing.d.ts +1 -1
- package/esm2020/browser/src/dsl/animation.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_ast_builder.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_timeline_builder.mjs +16 -5
- package/esm2020/browser/src/dsl/animation_transition_factory.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_transition_instruction.mjs +1 -1
- package/esm2020/browser/src/dsl/animation_trigger.mjs +1 -1
- package/esm2020/browser/src/private_export.mjs +2 -4
- package/esm2020/browser/src/render/animation_driver.mjs +3 -3
- package/esm2020/browser/src/render/animation_engine_next.mjs +1 -1
- package/esm2020/browser/src/render/shared.mjs +4 -20
- package/esm2020/browser/src/render/timeline_animation_engine.mjs +1 -1
- package/esm2020/browser/src/render/transition_animation_engine.mjs +1 -1
- package/esm2020/browser/src/render/web_animations/web_animations_driver.mjs +3 -21
- package/esm2020/browser/src/util.mjs +1 -1
- package/esm2020/src/version.mjs +1 -1
- package/fesm2015/animations.mjs +1 -1
- package/fesm2015/browser/testing.mjs +1 -1
- package/fesm2015/browser.mjs +26 -482
- package/fesm2015/browser.mjs.map +1 -1
- package/fesm2020/animations.mjs +1 -1
- package/fesm2020/browser/testing.mjs +1 -1
- package/fesm2020/browser.mjs +26 -481
- package/fesm2020/browser.mjs.map +1 -1
- package/package.json +2 -2
- package/esm2020/browser/src/render/css_keyframes/css_keyframes_driver.mjs +0 -121
- package/esm2020/browser/src/render/css_keyframes/css_keyframes_player.mjs +0 -133
- package/esm2020/browser/src/render/css_keyframes/direct_style_player.mjs +0 -51
- package/esm2020/browser/src/render/css_keyframes/element_animation_style_handler.mjs +0 -137
package/fesm2020/animations.mjs
CHANGED
package/fesm2020/browser.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v13.2.
|
|
2
|
+
* @license Angular v13.2.1
|
|
3
3
|
* (c) 2010-2022 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -148,27 +148,11 @@ if (_isNode || typeof Element !== 'undefined') {
|
|
|
148
148
|
};
|
|
149
149
|
}
|
|
150
150
|
_query = (element, selector, multi) => {
|
|
151
|
-
let results = [];
|
|
152
151
|
if (multi) {
|
|
153
|
-
|
|
154
|
-
// For element queries that return sufficiently large NodeList objects,
|
|
155
|
-
// using spread syntax to populate the results array causes a RangeError
|
|
156
|
-
// due to the call stack limit being reached. `Array.from` can not be used
|
|
157
|
-
// as well, since NodeList is not iterable in IE 11, see
|
|
158
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/NodeList
|
|
159
|
-
// More info is available in #38551.
|
|
160
|
-
const elems = element.querySelectorAll(selector);
|
|
161
|
-
for (let i = 0; i < elems.length; i++) {
|
|
162
|
-
results.push(elems[i]);
|
|
163
|
-
}
|
|
152
|
+
return Array.from(element.querySelectorAll(selector));
|
|
164
153
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
if (elm) {
|
|
168
|
-
results.push(elm);
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
return results;
|
|
154
|
+
const elem = element.querySelector(selector);
|
|
155
|
+
return elem ? [elem] : [];
|
|
172
156
|
};
|
|
173
157
|
}
|
|
174
158
|
function containsVendorPrefix(prop) {
|
|
@@ -241,9 +225,9 @@ class NoopAnimationDriver {
|
|
|
241
225
|
return new NoopAnimationPlayer(duration, delay);
|
|
242
226
|
}
|
|
243
227
|
}
|
|
244
|
-
NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.
|
|
245
|
-
NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.
|
|
228
|
+
NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
229
|
+
NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NoopAnimationDriver });
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NoopAnimationDriver, decorators: [{
|
|
247
231
|
type: Injectable
|
|
248
232
|
}] });
|
|
249
233
|
/**
|
|
@@ -260,7 +244,7 @@ AnimationDriver.NOOP = ( /* @__PURE__ */new NoopAnimationDriver());
|
|
|
260
244
|
* Use of this source code is governed by an MIT-style license that can be
|
|
261
245
|
* found in the LICENSE file at https://angular.io/license
|
|
262
246
|
*/
|
|
263
|
-
const ONE_SECOND
|
|
247
|
+
const ONE_SECOND = 1000;
|
|
264
248
|
const SUBSTITUTION_EXPR_START = '{{';
|
|
265
249
|
const SUBSTITUTION_EXPR_END = '}}';
|
|
266
250
|
const ENTER_CLASSNAME = 'ng-enter';
|
|
@@ -280,7 +264,7 @@ function resolveTimingValue(value) {
|
|
|
280
264
|
function _convertTimeValueToMS(value, unit) {
|
|
281
265
|
switch (unit) {
|
|
282
266
|
case 's':
|
|
283
|
-
return value * ONE_SECOND
|
|
267
|
+
return value * ONE_SECOND;
|
|
284
268
|
default: // ms or something else
|
|
285
269
|
return value;
|
|
286
270
|
}
|
|
@@ -1263,10 +1247,21 @@ class AnimationTimelineBuilderVisitor {
|
|
|
1263
1247
|
visitDslNode(this, ast, context);
|
|
1264
1248
|
// this checks to see if an actual animation happened
|
|
1265
1249
|
const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
|
|
1266
|
-
if (
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1250
|
+
if (Object.keys(finalStyles).length) {
|
|
1251
|
+
// note: we just want to apply the final styles for the rootElement, so we do not
|
|
1252
|
+
// just apply the styles to the last timeline but the last timeline which
|
|
1253
|
+
// element is the root one (basically `*`-styles are replaced with the actual
|
|
1254
|
+
// state style values only for the root element)
|
|
1255
|
+
let lastRootTimeline;
|
|
1256
|
+
for (let i = timelines.length - 1; i >= 0; i--) {
|
|
1257
|
+
const timeline = timelines[i];
|
|
1258
|
+
if (timeline.element === rootElement) {
|
|
1259
|
+
lastRootTimeline = timeline;
|
|
1260
|
+
break;
|
|
1261
|
+
}
|
|
1262
|
+
}
|
|
1263
|
+
if (lastRootTimeline && !lastRootTimeline.allowOnlyTimelineStyles()) {
|
|
1264
|
+
lastRootTimeline.setStyles([finalStyles], null, context.errors, options);
|
|
1270
1265
|
}
|
|
1271
1266
|
}
|
|
1272
1267
|
return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
|
|
@@ -3988,439 +3983,6 @@ function isNonAnimatableStyle(prop) {
|
|
|
3988
3983
|
return prop === 'display' || prop === 'position';
|
|
3989
3984
|
}
|
|
3990
3985
|
|
|
3991
|
-
/**
|
|
3992
|
-
* @license
|
|
3993
|
-
* Copyright Google LLC All Rights Reserved.
|
|
3994
|
-
*
|
|
3995
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
3996
|
-
* found in the LICENSE file at https://angular.io/license
|
|
3997
|
-
*/
|
|
3998
|
-
const ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
|
|
3999
|
-
const ANIMATION_PROP = 'animation';
|
|
4000
|
-
const ANIMATIONEND_EVENT = 'animationend';
|
|
4001
|
-
const ONE_SECOND = 1000;
|
|
4002
|
-
class ElementAnimationStyleHandler {
|
|
4003
|
-
constructor(_element, _name, _duration, _delay, _easing, _fillMode, _onDoneFn) {
|
|
4004
|
-
this._element = _element;
|
|
4005
|
-
this._name = _name;
|
|
4006
|
-
this._duration = _duration;
|
|
4007
|
-
this._delay = _delay;
|
|
4008
|
-
this._easing = _easing;
|
|
4009
|
-
this._fillMode = _fillMode;
|
|
4010
|
-
this._onDoneFn = _onDoneFn;
|
|
4011
|
-
this._finished = false;
|
|
4012
|
-
this._destroyed = false;
|
|
4013
|
-
this._startTime = 0;
|
|
4014
|
-
this._position = 0;
|
|
4015
|
-
this._eventFn = (e) => this._handleCallback(e);
|
|
4016
|
-
}
|
|
4017
|
-
apply() {
|
|
4018
|
-
applyKeyframeAnimation(this._element, `${this._duration}ms ${this._easing} ${this._delay}ms 1 normal ${this._fillMode} ${this._name}`);
|
|
4019
|
-
addRemoveAnimationEvent(this._element, this._eventFn, false);
|
|
4020
|
-
this._startTime = Date.now();
|
|
4021
|
-
}
|
|
4022
|
-
pause() {
|
|
4023
|
-
playPauseAnimation(this._element, this._name, 'paused');
|
|
4024
|
-
}
|
|
4025
|
-
resume() {
|
|
4026
|
-
playPauseAnimation(this._element, this._name, 'running');
|
|
4027
|
-
}
|
|
4028
|
-
setPosition(position) {
|
|
4029
|
-
const index = findIndexForAnimation(this._element, this._name);
|
|
4030
|
-
this._position = position * this._duration;
|
|
4031
|
-
setAnimationStyle(this._element, 'Delay', `-${this._position}ms`, index);
|
|
4032
|
-
}
|
|
4033
|
-
getPosition() {
|
|
4034
|
-
return this._position;
|
|
4035
|
-
}
|
|
4036
|
-
_handleCallback(event) {
|
|
4037
|
-
const timestamp = event._ngTestManualTimestamp || Date.now();
|
|
4038
|
-
const elapsedTime = parseFloat(event.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES)) * ONE_SECOND;
|
|
4039
|
-
if (event.animationName == this._name &&
|
|
4040
|
-
Math.max(timestamp - this._startTime, 0) >= this._delay && elapsedTime >= this._duration) {
|
|
4041
|
-
this.finish();
|
|
4042
|
-
}
|
|
4043
|
-
}
|
|
4044
|
-
finish() {
|
|
4045
|
-
if (this._finished)
|
|
4046
|
-
return;
|
|
4047
|
-
this._finished = true;
|
|
4048
|
-
this._onDoneFn();
|
|
4049
|
-
addRemoveAnimationEvent(this._element, this._eventFn, true);
|
|
4050
|
-
}
|
|
4051
|
-
destroy() {
|
|
4052
|
-
if (this._destroyed)
|
|
4053
|
-
return;
|
|
4054
|
-
this._destroyed = true;
|
|
4055
|
-
this.finish();
|
|
4056
|
-
removeKeyframeAnimation(this._element, this._name);
|
|
4057
|
-
}
|
|
4058
|
-
}
|
|
4059
|
-
function playPauseAnimation(element, name, status) {
|
|
4060
|
-
const index = findIndexForAnimation(element, name);
|
|
4061
|
-
setAnimationStyle(element, 'PlayState', status, index);
|
|
4062
|
-
}
|
|
4063
|
-
function applyKeyframeAnimation(element, value) {
|
|
4064
|
-
const anim = getAnimationStyle(element, '').trim();
|
|
4065
|
-
let index = 0;
|
|
4066
|
-
if (anim.length) {
|
|
4067
|
-
index = countChars(anim, ',') + 1;
|
|
4068
|
-
value = `${anim}, ${value}`;
|
|
4069
|
-
}
|
|
4070
|
-
setAnimationStyle(element, '', value);
|
|
4071
|
-
return index;
|
|
4072
|
-
}
|
|
4073
|
-
function removeKeyframeAnimation(element, name) {
|
|
4074
|
-
const anim = getAnimationStyle(element, '');
|
|
4075
|
-
const tokens = anim.split(',');
|
|
4076
|
-
const index = findMatchingTokenIndex(tokens, name);
|
|
4077
|
-
if (index >= 0) {
|
|
4078
|
-
tokens.splice(index, 1);
|
|
4079
|
-
const newValue = tokens.join(',');
|
|
4080
|
-
setAnimationStyle(element, '', newValue);
|
|
4081
|
-
}
|
|
4082
|
-
}
|
|
4083
|
-
function findIndexForAnimation(element, value) {
|
|
4084
|
-
const anim = getAnimationStyle(element, '');
|
|
4085
|
-
if (anim.indexOf(',') > 0) {
|
|
4086
|
-
const tokens = anim.split(',');
|
|
4087
|
-
return findMatchingTokenIndex(tokens, value);
|
|
4088
|
-
}
|
|
4089
|
-
return findMatchingTokenIndex([anim], value);
|
|
4090
|
-
}
|
|
4091
|
-
function findMatchingTokenIndex(tokens, searchToken) {
|
|
4092
|
-
for (let i = 0; i < tokens.length; i++) {
|
|
4093
|
-
if (tokens[i].indexOf(searchToken) >= 0) {
|
|
4094
|
-
return i;
|
|
4095
|
-
}
|
|
4096
|
-
}
|
|
4097
|
-
return -1;
|
|
4098
|
-
}
|
|
4099
|
-
function addRemoveAnimationEvent(element, fn, doRemove) {
|
|
4100
|
-
doRemove ? element.removeEventListener(ANIMATIONEND_EVENT, fn) :
|
|
4101
|
-
element.addEventListener(ANIMATIONEND_EVENT, fn);
|
|
4102
|
-
}
|
|
4103
|
-
function setAnimationStyle(element, name, value, index) {
|
|
4104
|
-
const prop = ANIMATION_PROP + name;
|
|
4105
|
-
if (index != null) {
|
|
4106
|
-
const oldValue = element.style[prop];
|
|
4107
|
-
if (oldValue.length) {
|
|
4108
|
-
const tokens = oldValue.split(',');
|
|
4109
|
-
tokens[index] = value;
|
|
4110
|
-
value = tokens.join(',');
|
|
4111
|
-
}
|
|
4112
|
-
}
|
|
4113
|
-
element.style[prop] = value;
|
|
4114
|
-
}
|
|
4115
|
-
function getAnimationStyle(element, name) {
|
|
4116
|
-
return element.style[ANIMATION_PROP + name] || '';
|
|
4117
|
-
}
|
|
4118
|
-
function countChars(value, char) {
|
|
4119
|
-
let count = 0;
|
|
4120
|
-
for (let i = 0; i < value.length; i++) {
|
|
4121
|
-
const c = value.charAt(i);
|
|
4122
|
-
if (c === char)
|
|
4123
|
-
count++;
|
|
4124
|
-
}
|
|
4125
|
-
return count;
|
|
4126
|
-
}
|
|
4127
|
-
|
|
4128
|
-
const DEFAULT_FILL_MODE = 'forwards';
|
|
4129
|
-
const DEFAULT_EASING = 'linear';
|
|
4130
|
-
class CssKeyframesPlayer {
|
|
4131
|
-
constructor(element, keyframes, animationName, _duration, _delay, easing, _finalStyles, _specialStyles) {
|
|
4132
|
-
this.element = element;
|
|
4133
|
-
this.keyframes = keyframes;
|
|
4134
|
-
this.animationName = animationName;
|
|
4135
|
-
this._duration = _duration;
|
|
4136
|
-
this._delay = _delay;
|
|
4137
|
-
this._finalStyles = _finalStyles;
|
|
4138
|
-
this._specialStyles = _specialStyles;
|
|
4139
|
-
this._onDoneFns = [];
|
|
4140
|
-
this._onStartFns = [];
|
|
4141
|
-
this._onDestroyFns = [];
|
|
4142
|
-
this.currentSnapshot = {};
|
|
4143
|
-
this._state = 0;
|
|
4144
|
-
this.easing = easing || DEFAULT_EASING;
|
|
4145
|
-
this.totalTime = _duration + _delay;
|
|
4146
|
-
this._buildStyler();
|
|
4147
|
-
}
|
|
4148
|
-
onStart(fn) {
|
|
4149
|
-
this._onStartFns.push(fn);
|
|
4150
|
-
}
|
|
4151
|
-
onDone(fn) {
|
|
4152
|
-
this._onDoneFns.push(fn);
|
|
4153
|
-
}
|
|
4154
|
-
onDestroy(fn) {
|
|
4155
|
-
this._onDestroyFns.push(fn);
|
|
4156
|
-
}
|
|
4157
|
-
destroy() {
|
|
4158
|
-
this.init();
|
|
4159
|
-
if (this._state >= 4 /* DESTROYED */)
|
|
4160
|
-
return;
|
|
4161
|
-
this._state = 4 /* DESTROYED */;
|
|
4162
|
-
this._styler.destroy();
|
|
4163
|
-
this._flushStartFns();
|
|
4164
|
-
this._flushDoneFns();
|
|
4165
|
-
if (this._specialStyles) {
|
|
4166
|
-
this._specialStyles.destroy();
|
|
4167
|
-
}
|
|
4168
|
-
this._onDestroyFns.forEach(fn => fn());
|
|
4169
|
-
this._onDestroyFns = [];
|
|
4170
|
-
}
|
|
4171
|
-
_flushDoneFns() {
|
|
4172
|
-
this._onDoneFns.forEach(fn => fn());
|
|
4173
|
-
this._onDoneFns = [];
|
|
4174
|
-
}
|
|
4175
|
-
_flushStartFns() {
|
|
4176
|
-
this._onStartFns.forEach(fn => fn());
|
|
4177
|
-
this._onStartFns = [];
|
|
4178
|
-
}
|
|
4179
|
-
finish() {
|
|
4180
|
-
this.init();
|
|
4181
|
-
if (this._state >= 3 /* FINISHED */)
|
|
4182
|
-
return;
|
|
4183
|
-
this._state = 3 /* FINISHED */;
|
|
4184
|
-
this._styler.finish();
|
|
4185
|
-
this._flushStartFns();
|
|
4186
|
-
if (this._specialStyles) {
|
|
4187
|
-
this._specialStyles.finish();
|
|
4188
|
-
}
|
|
4189
|
-
this._flushDoneFns();
|
|
4190
|
-
}
|
|
4191
|
-
setPosition(value) {
|
|
4192
|
-
this._styler.setPosition(value);
|
|
4193
|
-
}
|
|
4194
|
-
getPosition() {
|
|
4195
|
-
return this._styler.getPosition();
|
|
4196
|
-
}
|
|
4197
|
-
hasStarted() {
|
|
4198
|
-
return this._state >= 2 /* STARTED */;
|
|
4199
|
-
}
|
|
4200
|
-
init() {
|
|
4201
|
-
if (this._state >= 1 /* INITIALIZED */)
|
|
4202
|
-
return;
|
|
4203
|
-
this._state = 1 /* INITIALIZED */;
|
|
4204
|
-
const elm = this.element;
|
|
4205
|
-
this._styler.apply();
|
|
4206
|
-
if (this._delay) {
|
|
4207
|
-
this._styler.pause();
|
|
4208
|
-
}
|
|
4209
|
-
}
|
|
4210
|
-
play() {
|
|
4211
|
-
this.init();
|
|
4212
|
-
if (!this.hasStarted()) {
|
|
4213
|
-
this._flushStartFns();
|
|
4214
|
-
this._state = 2 /* STARTED */;
|
|
4215
|
-
if (this._specialStyles) {
|
|
4216
|
-
this._specialStyles.start();
|
|
4217
|
-
}
|
|
4218
|
-
}
|
|
4219
|
-
this._styler.resume();
|
|
4220
|
-
}
|
|
4221
|
-
pause() {
|
|
4222
|
-
this.init();
|
|
4223
|
-
this._styler.pause();
|
|
4224
|
-
}
|
|
4225
|
-
restart() {
|
|
4226
|
-
this.reset();
|
|
4227
|
-
this.play();
|
|
4228
|
-
}
|
|
4229
|
-
reset() {
|
|
4230
|
-
this._state = 0 /* RESET */;
|
|
4231
|
-
this._styler.destroy();
|
|
4232
|
-
this._buildStyler();
|
|
4233
|
-
this._styler.apply();
|
|
4234
|
-
}
|
|
4235
|
-
_buildStyler() {
|
|
4236
|
-
this._styler = new ElementAnimationStyleHandler(this.element, this.animationName, this._duration, this._delay, this.easing, DEFAULT_FILL_MODE, () => this.finish());
|
|
4237
|
-
}
|
|
4238
|
-
/** @internal */
|
|
4239
|
-
triggerCallback(phaseName) {
|
|
4240
|
-
const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
|
|
4241
|
-
methods.forEach(fn => fn());
|
|
4242
|
-
methods.length = 0;
|
|
4243
|
-
}
|
|
4244
|
-
beforeDestroy() {
|
|
4245
|
-
this.init();
|
|
4246
|
-
const styles = {};
|
|
4247
|
-
if (this.hasStarted()) {
|
|
4248
|
-
const finished = this._state >= 3 /* FINISHED */;
|
|
4249
|
-
Object.keys(this._finalStyles).forEach(prop => {
|
|
4250
|
-
if (prop != 'offset') {
|
|
4251
|
-
styles[prop] = finished ? this._finalStyles[prop] : computeStyle(this.element, prop);
|
|
4252
|
-
}
|
|
4253
|
-
});
|
|
4254
|
-
}
|
|
4255
|
-
this.currentSnapshot = styles;
|
|
4256
|
-
}
|
|
4257
|
-
}
|
|
4258
|
-
|
|
4259
|
-
/**
|
|
4260
|
-
* @license
|
|
4261
|
-
* Copyright Google LLC All Rights Reserved.
|
|
4262
|
-
*
|
|
4263
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
4264
|
-
* found in the LICENSE file at https://angular.io/license
|
|
4265
|
-
*/
|
|
4266
|
-
class DirectStylePlayer extends NoopAnimationPlayer {
|
|
4267
|
-
constructor(element, styles) {
|
|
4268
|
-
super();
|
|
4269
|
-
this.element = element;
|
|
4270
|
-
this._startingStyles = {};
|
|
4271
|
-
this.__initialized = false;
|
|
4272
|
-
this._styles = hypenatePropsObject(styles);
|
|
4273
|
-
}
|
|
4274
|
-
init() {
|
|
4275
|
-
if (this.__initialized || !this._startingStyles)
|
|
4276
|
-
return;
|
|
4277
|
-
this.__initialized = true;
|
|
4278
|
-
Object.keys(this._styles).forEach(prop => {
|
|
4279
|
-
this._startingStyles[prop] = this.element.style[prop];
|
|
4280
|
-
});
|
|
4281
|
-
super.init();
|
|
4282
|
-
}
|
|
4283
|
-
play() {
|
|
4284
|
-
if (!this._startingStyles)
|
|
4285
|
-
return;
|
|
4286
|
-
this.init();
|
|
4287
|
-
Object.keys(this._styles)
|
|
4288
|
-
.forEach(prop => this.element.style.setProperty(prop, this._styles[prop]));
|
|
4289
|
-
super.play();
|
|
4290
|
-
}
|
|
4291
|
-
destroy() {
|
|
4292
|
-
if (!this._startingStyles)
|
|
4293
|
-
return;
|
|
4294
|
-
Object.keys(this._startingStyles).forEach(prop => {
|
|
4295
|
-
const value = this._startingStyles[prop];
|
|
4296
|
-
if (value) {
|
|
4297
|
-
this.element.style.setProperty(prop, value);
|
|
4298
|
-
}
|
|
4299
|
-
else {
|
|
4300
|
-
this.element.style.removeProperty(prop);
|
|
4301
|
-
}
|
|
4302
|
-
});
|
|
4303
|
-
this._startingStyles = null;
|
|
4304
|
-
super.destroy();
|
|
4305
|
-
}
|
|
4306
|
-
}
|
|
4307
|
-
|
|
4308
|
-
const KEYFRAMES_NAME_PREFIX = 'gen_css_kf_';
|
|
4309
|
-
const TAB_SPACE = ' ';
|
|
4310
|
-
class CssKeyframesDriver {
|
|
4311
|
-
constructor() {
|
|
4312
|
-
this._count = 0;
|
|
4313
|
-
}
|
|
4314
|
-
validateStyleProperty(prop) {
|
|
4315
|
-
return validateStyleProperty(prop);
|
|
4316
|
-
}
|
|
4317
|
-
matchesElement(_element, _selector) {
|
|
4318
|
-
// This method is deprecated and no longer in use so we return false.
|
|
4319
|
-
return false;
|
|
4320
|
-
}
|
|
4321
|
-
containsElement(elm1, elm2) {
|
|
4322
|
-
return containsElement(elm1, elm2);
|
|
4323
|
-
}
|
|
4324
|
-
query(element, selector, multi) {
|
|
4325
|
-
return invokeQuery(element, selector, multi);
|
|
4326
|
-
}
|
|
4327
|
-
computeStyle(element, prop, defaultValue) {
|
|
4328
|
-
return window.getComputedStyle(element)[prop];
|
|
4329
|
-
}
|
|
4330
|
-
buildKeyframeElement(element, name, keyframes) {
|
|
4331
|
-
keyframes = keyframes.map(kf => hypenatePropsObject(kf));
|
|
4332
|
-
let keyframeStr = `@keyframes ${name} {\n`;
|
|
4333
|
-
let tab = '';
|
|
4334
|
-
keyframes.forEach(kf => {
|
|
4335
|
-
tab = TAB_SPACE;
|
|
4336
|
-
const offset = parseFloat(kf['offset']);
|
|
4337
|
-
keyframeStr += `${tab}${offset * 100}% {\n`;
|
|
4338
|
-
tab += TAB_SPACE;
|
|
4339
|
-
Object.keys(kf).forEach(prop => {
|
|
4340
|
-
const value = kf[prop];
|
|
4341
|
-
switch (prop) {
|
|
4342
|
-
case 'offset':
|
|
4343
|
-
return;
|
|
4344
|
-
case 'easing':
|
|
4345
|
-
if (value) {
|
|
4346
|
-
keyframeStr += `${tab}animation-timing-function: ${value};\n`;
|
|
4347
|
-
}
|
|
4348
|
-
return;
|
|
4349
|
-
default:
|
|
4350
|
-
keyframeStr += `${tab}${prop}: ${value};\n`;
|
|
4351
|
-
return;
|
|
4352
|
-
}
|
|
4353
|
-
});
|
|
4354
|
-
keyframeStr += `${tab}}\n`;
|
|
4355
|
-
});
|
|
4356
|
-
keyframeStr += `}\n`;
|
|
4357
|
-
const kfElm = document.createElement('style');
|
|
4358
|
-
kfElm.textContent = keyframeStr;
|
|
4359
|
-
return kfElm;
|
|
4360
|
-
}
|
|
4361
|
-
animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
|
|
4362
|
-
if ((typeof ngDevMode === 'undefined' || ngDevMode) && scrubberAccessRequested) {
|
|
4363
|
-
notifyFaultyScrubber();
|
|
4364
|
-
}
|
|
4365
|
-
const previousCssKeyframePlayers = previousPlayers.filter(player => player instanceof CssKeyframesPlayer);
|
|
4366
|
-
const previousStyles = {};
|
|
4367
|
-
if (allowPreviousPlayerStylesMerge(duration, delay)) {
|
|
4368
|
-
previousCssKeyframePlayers.forEach(player => {
|
|
4369
|
-
let styles = player.currentSnapshot;
|
|
4370
|
-
Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
|
|
4371
|
-
});
|
|
4372
|
-
}
|
|
4373
|
-
keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
|
|
4374
|
-
const finalStyles = flattenKeyframesIntoStyles(keyframes);
|
|
4375
|
-
// if there is no animation then there is no point in applying
|
|
4376
|
-
// styles and waiting for an event to get fired. This causes lag.
|
|
4377
|
-
// It's better to just directly apply the styles to the element
|
|
4378
|
-
// via the direct styling animation player.
|
|
4379
|
-
if (duration == 0) {
|
|
4380
|
-
return new DirectStylePlayer(element, finalStyles);
|
|
4381
|
-
}
|
|
4382
|
-
const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`;
|
|
4383
|
-
const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
|
|
4384
|
-
const nodeToAppendKfElm = findNodeToAppendKeyframeElement(element);
|
|
4385
|
-
nodeToAppendKfElm.appendChild(kfElm);
|
|
4386
|
-
const specialStyles = packageNonAnimatableStyles(element, keyframes);
|
|
4387
|
-
const player = new CssKeyframesPlayer(element, keyframes, animationName, duration, delay, easing, finalStyles, specialStyles);
|
|
4388
|
-
player.onDestroy(() => removeElement(kfElm));
|
|
4389
|
-
return player;
|
|
4390
|
-
}
|
|
4391
|
-
}
|
|
4392
|
-
function findNodeToAppendKeyframeElement(element) {
|
|
4393
|
-
const rootNode = element.getRootNode?.();
|
|
4394
|
-
if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) {
|
|
4395
|
-
return rootNode;
|
|
4396
|
-
}
|
|
4397
|
-
return document.head;
|
|
4398
|
-
}
|
|
4399
|
-
function flattenKeyframesIntoStyles(keyframes) {
|
|
4400
|
-
let flatKeyframes = {};
|
|
4401
|
-
if (keyframes) {
|
|
4402
|
-
const kfs = Array.isArray(keyframes) ? keyframes : [keyframes];
|
|
4403
|
-
kfs.forEach(kf => {
|
|
4404
|
-
Object.keys(kf).forEach(prop => {
|
|
4405
|
-
if (prop == 'offset' || prop == 'easing')
|
|
4406
|
-
return;
|
|
4407
|
-
flatKeyframes[prop] = kf[prop];
|
|
4408
|
-
});
|
|
4409
|
-
});
|
|
4410
|
-
}
|
|
4411
|
-
return flatKeyframes;
|
|
4412
|
-
}
|
|
4413
|
-
function removeElement(node) {
|
|
4414
|
-
node.parentNode.removeChild(node);
|
|
4415
|
-
}
|
|
4416
|
-
let warningIssued = false;
|
|
4417
|
-
function notifyFaultyScrubber() {
|
|
4418
|
-
if (warningIssued)
|
|
4419
|
-
return;
|
|
4420
|
-
console.warn('@angular/animations: please load the web-animations.js polyfill to allow programmatic access...\n', ' visit https://bit.ly/IWukam to learn more about using the web-animation-js polyfill.');
|
|
4421
|
-
warningIssued = true;
|
|
4422
|
-
}
|
|
4423
|
-
|
|
4424
3986
|
class WebAnimationsPlayer {
|
|
4425
3987
|
constructor(element, keyframes, options, _specialStyles) {
|
|
4426
3988
|
this.element = element;
|
|
@@ -4576,10 +4138,6 @@ class WebAnimationsPlayer {
|
|
|
4576
4138
|
}
|
|
4577
4139
|
|
|
4578
4140
|
class WebAnimationsDriver {
|
|
4579
|
-
constructor() {
|
|
4580
|
-
this._isNativeImpl = /\{\s*\[native\s+code\]\s*\}/.test(getElementAnimateFn().toString());
|
|
4581
|
-
this._cssKeyframesDriver = new CssKeyframesDriver();
|
|
4582
|
-
}
|
|
4583
4141
|
validateStyleProperty(prop) {
|
|
4584
4142
|
return validateStyleProperty(prop);
|
|
4585
4143
|
}
|
|
@@ -4596,14 +4154,7 @@ class WebAnimationsDriver {
|
|
|
4596
4154
|
computeStyle(element, prop, defaultValue) {
|
|
4597
4155
|
return window.getComputedStyle(element)[prop];
|
|
4598
4156
|
}
|
|
4599
|
-
|
|
4600
|
-
this._isNativeImpl = supported;
|
|
4601
|
-
}
|
|
4602
|
-
animate(element, keyframes, duration, delay, easing, previousPlayers = [], scrubberAccessRequested) {
|
|
4603
|
-
const useKeyframes = !scrubberAccessRequested && !this._isNativeImpl;
|
|
4604
|
-
if (useKeyframes) {
|
|
4605
|
-
return this._cssKeyframesDriver.animate(element, keyframes, duration, delay, easing, previousPlayers);
|
|
4606
|
-
}
|
|
4157
|
+
animate(element, keyframes, duration, delay, easing, previousPlayers = []) {
|
|
4607
4158
|
const fill = delay == 0 ? 'both' : 'forwards';
|
|
4608
4159
|
const playerOptions = { duration, delay, fill };
|
|
4609
4160
|
// we check for this to avoid having a null|undefined value be present
|
|
@@ -4625,12 +4176,6 @@ class WebAnimationsDriver {
|
|
|
4625
4176
|
return new WebAnimationsPlayer(element, keyframes, playerOptions, specialStyles);
|
|
4626
4177
|
}
|
|
4627
4178
|
}
|
|
4628
|
-
function supportsWebAnimations() {
|
|
4629
|
-
return typeof getElementAnimateFn() === 'function';
|
|
4630
|
-
}
|
|
4631
|
-
function getElementAnimateFn() {
|
|
4632
|
-
return (isBrowser() && Element.prototype['animate']) || {};
|
|
4633
|
-
}
|
|
4634
4179
|
|
|
4635
4180
|
/**
|
|
4636
4181
|
* @license
|
|
@@ -4668,5 +4213,5 @@ function getElementAnimateFn() {
|
|
|
4668
4213
|
* Generated bundle index. Do not edit.
|
|
4669
4214
|
*/
|
|
4670
4215
|
|
|
4671
|
-
export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer,
|
|
4216
|
+
export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, validateStyleProperty as ɵvalidateStyleProperty };
|
|
4672
4217
|
//# sourceMappingURL=browser.mjs.map
|