angular 19 中使用 ng-zorro-antd 标签页组件 nz-tabset 的问题
0
悬赏园豆：30
[待解决问题]
园子的博客后台 tab 组件用的是 ng-zorro-antd 的 nz-tabset，升级到 angular 19 + ng-zorro-antd 19 之后运行时浏览器控制台出现下面的警告
Warning: The animation trigger "tabSwitchMotion" is attempting to animate the following not animatable properties: display
(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
即使用官方示例代码 components-tabs-demo-basic 也是同样的问题
github 上也有人提交了 issue https://github.com/NG-ZORRO/ng-zorro-antd/issues/8592
所有回答(2)
0
ng-zorro-antd 的相关代码 tabs.ts
export const tabSwitchMotion: AnimationTriggerMetadata = trigger('tabSwitchMotion', [
state(
'leave',
style({
display: 'none'
})
),
// ...
]);
从 Animatable and not animatable CSS properties 看 display 是 animatable CSS property
angular 中对应的告警代码 animation_transition_factory.ts#L208，所在方法 checkNonAnimatableInTimelines
if (invalidNonAnimatableProps.size > 0) {
console.warn(
`Warning: The animation trigger "${triggerName}" is attempting to animate the following` +
' not animatable properties: ' +
Array.from(invalidNonAnimatableProps).join(', ') +
'\n' +
'(to check the list of all animatable properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)',
);
}
Angular 14 出现过类似问题，详见 https://stackoverflow.com/q/72649419
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".
在 development 环境下才会出现这个警告
0
看看...............
