2

Updated to Angular 14 and this warning appeared. These properties are not used in my animations.

[Error in console][1]
The animation trigger "rootItem" has built with the following warnings:
 - The following provided properties are not animatable: overflow
   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
The animation trigger "panelContent" has built with the following warnings:
 - The following provided properties are not animatable: overflow
The animation trigger "submenu" has built with the following warnings:
 - The following provided properties are not animatable: overflow

How fix this?

Vega
  • 27,856
  • 27
  • 95
  • 103
Serhii Derkach
  • 69
  • 9
  • I'm pretty sure the answer is in the warnings: you can't animate the CSS `overflow` property. Stop trying to do so, and the warnings will go away: use `ngClass` or `ngStyle` if you need to programmatically modify an element's `overflow` property – Will Alexander Jun 16 '22 at 17:04
  • Can you look at the compiled code to find what is trying to animate overflow. Overflow is discretely animatable so it’s a bit surprising to get a warning like that. – A Haworth Jun 16 '22 at 17:50
  • @WillAlexander The overflow property is not used anywhere in my project at all. Checked through the search for the project. But it is in the libraries. Added search screenshot. – Serhii Derkach Jun 17 '22 at 07:21
  • Are you using the PrimeNg component library? I'm seeing a similar issue – David Shortman Jun 17 '22 at 14:57
  • 2
    Here's a link to the relevant issue in PrimeNg- https://github.com/primefaces/primeng/issues/11617 – David Shortman Jun 17 '22 at 14:57
  • @DavidShortman I also use PrimeNg and see this warning – mountpoint Jun 21 '22 at 08:50
  • I suspect this warning is gonna go away in a near future fix, @Vega. It shows up whenever you set styles attributes that are not animable whether or not your implementation sets them as part of an animate() call in a transition. It's very common to set "preparation" styles to be applied only for the duration of a transition (absolute positioning and overflow) but animate only specific styles (such as opacity). In this example, we would not be trying to animate position and overflow, but since it is set somewhere within the transition() call, Angular 14 warns us (IMHO erroneously) about it. – diegovilar Jun 29 '22 at 13:44
  • 1
    I've opened an Issue at https://github.com/angular/angular/issues/46602 – diegovilar Jun 29 '22 at 14:26
  • @DavidShortman PrimeNg Yes – Serhii Derkach Jul 06 '22 at 19:14

1 Answers1

4

Update: Solution for false-positive warnings coming possibly through PR 46666

These warnings were added on PR 45212 to aid with issue 27577.

They are dev-only warnings that were added to "provide a better experience for developers so that if they see that something is not being animated then they can easily identify what is going wrong".

If anywhere in the transition not animatable properties are set, a warning is gonna be issued, whether or not they are part of an animate() call. You said that you're getting warnings for properties not used in your animations, but remember that animate() calls that don't specify the properties to bet animated, only the timing (in other words, only provide the first argument), will animate the diff between the initial and the end states, and that might be where the non animatable properties are being noted by the compiler.

If you are certain those non animatable properties are not part of your code in any way and thus the warnings make non sense, maybe open an issue on https://github.com/angular/angular/issues and provide an implementation example?

That being said, the discussion on issues 46602 might end up causing Angular to provide a way for developers to disable warnings in-place on style() calls where they decide the warnings are not applicable, but we'll have to wait and see.

diegovilar
  • 4,178
  • 1
  • 14
  • 7