angular: False positive warnings about not animatable properties

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

animations

Is this a regression?

No

Description

There was already a fix for this warnings on #46666 but it didn’t fix all the false positives.

For example with this code I get warnings.

export const collapse: AnimationTriggerMetadata = trigger('collapseAnimation', [
  state('expanded', style({ height: '*', visibility: 'visible' })),
  state('hidden', style({ height: 0, overflow: 'hidden', borderTopWidth: '0', visibility: 'hidden' })),
  transition('expanded => hidden', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  transition('hidden => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
]);

<div class="collapse-content"
     [class.collapse-content-active]="active"
     [@collapseAnimation]="active ? 'expanded' : 'hidden'">
  <div class="collapse-content-box">
    <ng-content></ng-content>
  </div>
</div>

For me to remove the overflow hidden, I would have to set the style manually with the same delay as the animation.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Warning: The animation trigger "collapseAnimation" is attempting to animate the following not animatable properties: overflow
(to check the list of all animatable properties visit 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.4
Node: 16.15.1
Package Manager: npm 8.13.2
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            14.0.4
@angular-devkit/schematics      14.0.4
@angular/animations             14.0.6
@schematics/angular             14.0.4
ng-packagr                      14.0.3
rxjs                            7.5.5
typescript                      4.7.4

Anything else?

No response

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 1
  • Comments: 21 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Hey! Why is this not merged for an entire year? We face the same problem, and this warning appearing on every animation run is really annoying. Adding overflow as an animation step is a pretty common scenario, yet there is no way to say the framework that you are not really expecting it to “animate” this property, you just set it’s value.

+5
pshurygin on Feb 9, 2024

Would love to see @dario-piotrowicz 's PR merged. Facing this issue with ‘display’.

+2
pm20390 on Dec 7, 2023

Looking good, thanks 😃 I believe it still takes some efforts to solve the primary case we mentioned earlier (as to have some special way to define non-animatable styles within transition scope) but currently it completely satisfies the needs.

+2
strigefleur on Feb 12, 2023

The web animations “standards” are clearly “in motion” so to speak. I wonder who maintains the list of “not animatable” properties for this warning? All your references in https://github.com/angular/angular/issues/27577#issuecomment-1053542855, @dario-piotrowicz, seem to contradict your statements now.

+1
superole on Mar 7, 2024

Would love to see @dario-piotrowicz 's PR merged. Facing this issue with ‘display’.

Same here. Let’s get it merged! 😄

+1
ilyakonrad on Dec 20, 2023

@dario-piotrowicz LGTM! As for the other case @strigefleur mentioned, I will create another issue so we can discuss it there.

+1
dionatan-g on Feb 13, 2023

@dionatan-g, @strigefleur If you want please have a look at the PR, especially the unit tests to see how I implemented the disabling and if that looks good for your use cases 🙂

But tldr:

  • you can set disableAnimatableDevWarnings when setting up the BrowserAnimationsModule to completely disable the warning (if it really bothers you all the time)
  • or, you can set allowedProps in the specific transition call to fix a one-off issue (if you want the check/warning but it is bothering you in a specific situation)

Please let me know what you think 🙂

+1
dario-piotrowicz on Feb 11, 2023

@dionatan-g I’ve acutally got a flag to disable the warning working on a local branch (basically there you can put the flag in the BrowserAnimationsModule to disable the warnings globally), I wanted to open a PR but haven’t found the time (I still need to add unit tests for it), at the latest I’ll open the PR this weekend 🙂 (I’ll ping you so you can have a look and see if that would help your case 🙂)

Regarding the styles I have some ideas/thoughts but I need to play with it to be sure…anyways yeah if you want create a new issue so we can keep things separate 🙂👍

+1
dario-piotrowicz on Feb 8, 2023

@dario-piotrowicz the point is taken; but could you please share the right way to deal with such a non-animatable properties that have to be set in the end of transition?

whatever the rest of style props are the opposite animation states should respectively set overflow: hidden and overflow: visible - how’d you implement it within animation cycle itself having no warning?

+1
strigefleur on Jan 30, 2023
Read more comments on GitHub
← angular: fakeAsync cannot work with FileReader event
angular: feat(Forms) Expose FormControl errors to parent FormGroup →