Warning: The animation trigger "collapseMotion" is attempting to animate the following not animatable properties: overflow

[kurimuson]

Reproduction link

https://stackblitz.com/edit/angular-tudsnl?file=src/app/app.component.ts

Steps to reproduce

When nz-menu open or close, console will print this waring.

What is expected?

no warning at animate.

What is actually happening?

animate with warning.

Environment	Info
ng-zorro-antd	14.1.1
Browser	chrome 103

---

browser.mjs:2541 Warning: The animation trigger "collapseMotion" 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)

[wangz-code]

我也遇到了 盯一下

[string-lzc]

Any updates?

[chenweihan]

me too

[CamiloB664]

...

[akib1997]

Waiting for updates!

[vanswang]

同样遇到了，mark 一下

[shalltears]

me too

[mjunlee]

16.1.0 有同样的告警

[bloom8848]

mark,same warning

[qq253498229]

ng17+zorro17 also has this issue

[aojiaoxiaolinlin]

有解决吗

[mvcheeyong]

用Github build, 会产生
Error: NG05105: Unexpected synthetic property @.disabled found. Please make sure that:

• Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.
• There is corresponding configuration for the animation named @.disabled defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations). package.json :
  "ng-zorro-antd": "16.2.2" ...

[codypotter]

bump

[ParsaArvanehPA]

用Github build, 会产生 Error: NG05105: Unexpected synthetic property @.disabled found. Please make sure that: - Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application. - There is corresponding configuration for the animation named @.disabled defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations). package.json : "ng-zorro-antd": "16.2.2" ...

If you are getting this error, it is because you haven't imported provideAnimations in your application. Try this in your app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
};

[ParsaArvanehPA]

Could someone who is using Angular version 16 or 17 verify if this warning persists? I have tested the op's stackblitz in my local project with version 17 and I do not see this warning.

[autogumcom]

Could someone who is using Angular version 16 or 17 verify if this warning persists? I have tested the op's stackblitz in my local project with version 17 and I do not see this warning.

After adding provideAnimations() everything is ok!

[mvcheeyong]

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
};

Thanks, it doesn't work if i imported provideAnimations() into my app.module.ts, but it works when i imported into my sider.module.ts. Notice: I am using Ng-zorro with my sider component

[ParsaArvanehPA]

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
};

Thanks, it doesn't work if i imported provideAnimations() into my app.module.ts, but it works when i imported into my sider.module.ts. Notice: I am using Ng-zorro with my sider component

Have you by any chance provided BrowserAnimationsModule anywhere in your application? I am asking this because providing it after providing the provideAnimations() might lead to the same behaviour as you described.

[dhananjayspeed]

any update on browser.mjs:2541 Warning: The animation trigger "collapseMotion" is attempting to animate the following not animatable properties: overflow (to check the list of all animatable properties

[All-The-Best-for]

用Github build, 会产生 Error: NG05105: Unexpected synthetic property @.disabled found. Please make sure that: - Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application. - There is corresponding configuration for the animation named @.disabled defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations). package.json : "ng-zorro-antd": "16.2.2" ...

If you are getting this error, it is because you haven't imported provideAnimations in your application. Try this in your app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
};

Thank you very much, this question has been bothering me all day！