Angular 14 unnecessarily warning about not animatable properties?

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

No

Description

It seems Angular 14 is warning about the presence of not animatable style attributes in a transition() call whether or not the implementation sets them as part of an animate() call.

In the following implementation, styles set in query(":enter, :leave") are preparation styles to be applied for the duration of the transition but are not set up to be animated. Still I get a warning about position and overflown not being animatable.

transition("* => fade", [
  style({ position: "relative" }),

  query(":enter, :leave", [style({
    position: "absolute",
    inset: "0 0 0 0",
    overflow: "hidden",
  })]),

  query(":enter", [style({ opacity: 0 })]),
  query(":leave", [animateChild()]),

  group([
    query(":enter", [animate("150ms ease-out", style({ opacity: 1 }))]),
    query(":leave", [animate("50ms", style({ opacity: 0 }))]),
    query("@*", [animateChild()]),
  ]),
]);

The animate() calls above are specific about which attributes are to be animated, so they are not trying to animate towards all the attributes of the destination state.

Am I wrong in my understanding of how transitions in Angular work or is the compiler being unnecessarily critic in the new version?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

The animation trigger "ngxRouterAnimation" has built with the following warnings:
 - The following provided properties are not animatable: position, overflow
   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.2
Node: 16.15.1
Package Manager: pnpm 7.3.0 
OS: linux x64

Angular: 14.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      14.0.2
@angular/cli                    14.0.2
@schematics/angular             14.0.2
ng-packagr                      14.0.2
rxjs                            7.5.5
typescript                      4.7.4
webpack                         5.73.0

Anything else?

No response

[dario-piotrowicz]

@diegovilar I implemented the check for actually providing the warning only if the animation is trying to animate them

As you can see here, it does the trick (I copied your animations code but I applied a random html to it since you didn’t provide one):

It has the drawback to be run when you play the animation instead of at build time, so you get the warning each time the animation runs instead of just when the component gets generated. This makes sense from the implementation point of view because it makes it easy to check if for an animation a non-animatable property is going to be animated. Hopefully it’s not too bad? I guess we shall see what reviewers say on the PR 😃

Maybe this could be somehow also done on the animation build time but that I think would introduce a lot of complexity (and thus would be much more prone to bugs I’d imagine)

[dario-piotrowicz]

@dionatan-g, I’m going to reply in the issue you’ve created 👍

(adding it here if anyone is following this thread: https://github.com/angular/angular/issues/46928)