make sure that when an animation is used via the `useAnimation` function
and a delay has been provided then that delay gets correctly applied
(this PR is a follow up for #47285)
PR Close#47468
make sure that when an animation is defined via the `animation` function
(and used via `useAnimation`) and a delay has been provided then that
delay gets correctly applied
resolves#47283
PR Close#47285
prior to this change the stagger timing was being built during the
ast building instead of dynamically when visiting the stagger animation,
thus it could not handle params correctly, this change makes it so that
during ast building a timing ast is built instead and that ast is used
dynammically to build animations which can handle params correctly
resolves#19786
PR Close#47208
style values get added to the `_globalTimelineStyles` map in order to keep
them so that they can be used across different timelines
`_globalTimelineStyles` was previously a plain object but has been
refactored to a map in #44482, as part of the update a check has been
changed from a ternary operation to an or (||), causing falsy values (as 0)
not to be added to the map anymore, apply the nullish coalescing operator (??)
instead to make sure only `undefined` and `null` are filtered out
also since this aspect was clearly not covered by tests, add a new test
to ensure that such regression doesn't happen in the future
resolves#46833
PR Close#46863
move the check for non-animatable properties from the animation building
phase to the application of the animation's transition instead, in such
a way we can check it against the keyframes of the transition's timeline
in order to only provide warnings for properties which are being
animated, thus not providing any warning for non-animatable properties
being applied to elements via the style function
this change has the benfit just mentioned above but it comes with two
drawbacks:
- the warning handling is not done in the building time so it is a bit
inconsistent with other type of validations (such as the unsupported css
properties one for example)
- before the warning was being applied only when the animation's data
was being parsed, so it happed only once but now since it is applied
when the animation is actually being prepared to be played, it happens
each time the animation runs
resolves#46602
PR Close#46666
This reverts commit b417370383.
The change applied is no longer appropriate since the use of animations
and shadow dom components is discouraged (as of #46738)
PR Close#46739
when a component uses the shadowDom view encapsulation its children are
not rendered as normal HTML children of the element but they are
insterted in the element's shadowRoot, this causes the leave of the
element not to be normally propagated to the shadow child elements, fix
such issue
resolves#46450
PR Close#46459
in the animation players, make sure than upon reset the
_onStartFns and _onDoneFns are also re-applied so that
they can be called again after resetting the animation
also set the noop animation player's _finished to false
when the player resets (needed to make sure that the _onDoneFns
get called)
resolves#26630
PR Close#46364
Simplifying the tree shakable error messages with the new format and removing the errorMessage variables
```ts
throw new RuntimeError(
RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
ngDevMode && 'Injector has already been destroyed.');
```
PR Close#46382
the check for unsupported CSS properties has been made dev-mode-only in
PR #45570, so the check for the unsupportedCSSPRopertiesFound can be
moved inside a ngDevMode check so that more code can be treeshaken away
PR Close#45591
make the validateStyleProperty check dev-mode only so that it is
consistent with the validateAnimatableStyleProperty check introduced in
PR #45212
besides consistency this change also reduces the payload size and
increases performance (since less logic is executed)
original conversation: https://github.com/angular/angular/pull/45212#discussion_r818106737
PR Close#45570
.substr() is deprecated so we replace it with functions which work similarily but aren't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>
PR Close#45397
warn developers when they are trying to animate non-animatable CSS
properties so that can more easily understand why something is not being
animated as they would expect it to
resolves#27577
PR Close#45212
The animations package supports adding default parameter values to an animation that will be used as a fallback if some parameters aren't defined. The problem is that they're applied using a spread expression which means that any own property of the animation parameters will override the defaults, even if it resolves to null or undefined. This can lead to obscure errors like "Cannot read property toString of undefined" for an animation that looks like `{params: {foo: undefined}}` with defaults `{foo: 123}`.
I ran into this issue while debugging some test failures on Material.
These changes address the issue by:
1. Applying the defaults if the resolved value is null or undefined.
2. Updating the validation function to use a null check instead of `hasOwnProperty`.
PR Close#45339
currently animations with unsupported CSS properties cause a hard error
and the crash of the animation itself, instead of this behaviour just
ignore such properties and provide a warning for the developer in
the console (only in dev mode)
this change also introduces a general way to present warnings
in the animations code
resolves#23195
PR Close#44729
This change is a follow up to #45057 to make `AnimationDriver.getParentElement`
a required method, which allows removing the slow path for the animation
namespace insertion logic.
BREAKING CHANGE:
The `AnimationDriver.getParentElement` method has become required, so any
implementors of this interface are now required to provide an implementation
for this method. This breakage is unlikely to affect application developers,
as `AnimationDriver` is not expected to be implemented in user code.
PR Close#45114
The prior approach would consider all existing namespaces from back to front
to find the one that's the closest ancestor for a given host element. An
expensive `contains` operation was used which needed to traverse all the
way up the document root _for each existing namespace_. This commit implements
an optimization where the closest namespace is found by traversing up from
the host element, avoiding repeated DOM traversal.
Closes#45055
PR Close#45057
fix the transition function accepting a delay in its AnimationOptions
input but not acting on it by adding such delay to all the transition's
timelines
(note: adding the delay to all the transition's timelines is the only
way to accomplish this since transitions have their own logic and do not
have their own timelines like other animation functions have)
resolves#29762
PR Close#44799
This commit removes CSS keyframes-based code that was used to support animations in old browsers. With IE11 deprecation, all supported browsers have native WebAnimations support, so the old code can be removed. This results in ~7KB decrease of the animations package bundle size, since most of the code was non-tree-shakable.
Closes#44520.
PR Close#44903
We were using a number of generic objects as if they were maps and relying on delete to remove
properties. In order to improve performance, these have been switched to native maps.
PR Close#44482
errors in the animations code are of type `any` but are consistently
used as if there were `string`s, change `any` to `string` to make
typing more accurate
PR Close#44726
during keyframe building only consider the root element's timelines
for the style setting, so that the states styles (applied with '*')
can be applied correctly
resolves#32133resolves#28654
PR Close#44515
when reordering a list with animations the list items lose their current
triggers values, that is because the reordering of an item is implemented
as follows (_note:_ the following implementation has been added in PR #23534)
- the item is removed and marked _setForRemoval_
- the item is re-inserted, and the _setForRemoval_ is changed to _setForMove_
- the player set for animating the removal is destroyed when _setForMove_ is detected
the above steps allow the element not to be animated and to keep its styling but the
triggers values get lost since the removal transition/player has already been initialized,
so this change adds a _previousTriggersValues_ map in the _REMOVAL_FLAG_ field in order to
restore the triggers values if/when the removal turns out to be a move, changing the above steps to:
- the item is removed and marked setForRemoval __and its current triggers values are saved as well__
- the item is re-inserted, and the setForRemoval is changed to setForMove
- the player set for animating the removal is destroyed when setForMove is detected __and the
trigger values are re-applied in the engine's statesByElement map__
resolves#29526
PR Close#44578
instead of declaring the WebAnimationsPlayer's _finalKeyframe
field with a non-null assertion, declare it as optional field
and use a non-null assertion only when it is being used in the
beforeDestroy function
relates to #24571
PR Close#44458
Currently child animation will be triggered by `animateChild()` despite it has been disabled.
These changes add some logic to prevent that unexpected behavior.
PR Close#37724
PR Close#37724
* The `TransitionAnimationEngine` had a fallback where it would store classes directly on a node if it doesn't have a `classList`. Presumably this is to support old browsers or if an animation is set on something like `ng-container`. This information was never used for anything since `containsClass` was never called. These changes simplify the logic to just a null check.
* Deprecates the `AnimationDriver.matchesElement` method, because it was only used in one place which can be replaced with `classList.contains`. We can't remove the method completely, because `AnimationDriver` is a public API. We also can't turn it into a method on the base class in order to remove it from the sub-classes, because it can break apps using `noImplicitOverride` while extending `AnimationDriver`.
PR Close#44378
Fix various typos and also improve sentences (by making them more clear
or grammatically correct) present in comments inside the animations package
PR Close#44203
Class static properties with initializers that cause code execution (for example, call expressions or new expressions) have the potential to cause side effects at module evaluation. This is similar in effect to module level code. As a result, optimizers can not safely remove a class with such a static property as the potential side effects may have meaningful effects on the state of the application execution. To allow classes with these type of static properties to be optimized and removed if unused, the initializer expressions for the static properties can be annotated as pure. This annotation provides a signal to an optimizer that the expression does not have any potential side effects and is useful in cases where static analysis can not currently prove that there are, in fact, no side effects caused by the initializer.
PR Close#43064
the final styles created in buildStyles lack normalization, meaning that pixel values remain as numbers (without "px") and so such properties fail to be correctly set/applied
Example: "width: 300" is applies as "width": "300" (and thus ignored) instead of the correct "width": "300px"
PR Close#42763
In combination with the TS `noImplicitOverride` compatibility changes,
we also want to follow the best-practice of adding `override` to
members which are implemented as part of abstract classes. This
commit fixes all instances which will be flagged as part of the
custom `no-implicit-override-abstract` TSLint rule.
PR Close#42512
This commit fixes the state of variable _started on call of reset method.
Earlier behaviour was on call of `reset()` method we are not setting back
`_started` flag's value to false and it created various issue for end user
which were expecting this behaviour as per name of method.
We provided end user `reset()` method, but it was empty method and on call
of it wasn't doing anything. As end user/developer were not able to
reuse animation not animation after call of reset method.
In this PR on call of `reset()` method we are setting flag `_started` value to false
which can be accessed by `hasStarted()`.
Resolves#18140
PR Close#41608
When including a component in a template, the component's host element
is immediately appended as child of the parent node upon creation.
Hence, `hostElement.parentNode` will be a valid reference. However, if
the parent component is being inserted as an embedded view—through
`ngIf` for example—then the parent's node itself will not have been
inserted yet. This means that we cannot properly determine the position
of the transition namespace, as any `containsElement` check will return
false given that the partial DOM tree has not been inserted yet, even
though it will be contained within an existing transition namespace once
the partial tree is attached.
This commit fixes the issue by not just looking at the existence of a
parent node, but rather a more extensive check using the driver's
`containsElement` method.
PR Close#19854
When determining whether to run an animation, the `TransitionAnimationPlayer`
checks to see if a DOM element is attached to the document. This is done by
checking to see if the element is "contained" by the document body node.
Previously, if the element was inside a shadow DOM, the engine would
determine that the element was not attached, even if the shadow DOM's
host was attached to the document. This commit updates the `containsElement()`
method on `AnimationDriver` implementations to also include shadow DOM
elements as being contained if their shadow host element is contained.
Further, when using CSS keyframes to trigger animations, the styling
was always added to the `head` element of the document, even for
animations on elements within a shadow DOM. This meant that those
elements never receive those styles and the animation would not run.
This commit updates the insertion of these styles so that they are added,
to the element's "root node", which is the nearest shadow DOM host, or the
`head` of the document if the element is not in a shadow DOM.
Closes#25672
PR Close#40134
Prior to this patch, if an element was removed multiple times (due
to the nature of parent/child elements), the leave listeners may
have been fired for an element that was already removed. This patch
adds a guard within the animations code to prevent this.
PR Close#40712
This commit adds ngDevMode guard to show warning only
in dev mode (similar to how things work in other parts of Ivy runtime code).
The ngDevMode flag helps to tree-shake this warning from production builds
(in dev mode everything will work as it works right now) to decrease production bundle size.
PR Close#39964
dario-piotrowicz