Angular 14动画本地项目失效，StackBlitz演示正常求排查

我在个人作品集项目中使用Angular Animations实现移动端导航的进出过渡，但动画未正常执行：元素直接弹出或消失，没有过渡效果。将动画时长改为9000ms后，元素进入时立即显示，离开时要延迟9秒才消失。

动画定义代码如下：

export const mobileNavAnimation = trigger('mobileNav', [
    transition(':enter', [
        animate('9000ms', keyframes([
            style({
                translate: '0px -600px',
                offset: 0
            }),
            style({
                translate: '0px 0px',
                offset: 1
            })
        ]))
    ]),
    transition(':leave', [
        animate('9000ms', keyframes([
            style({
                translate: '0px 0px',
                offset: 0
            }),
            style({
                translate: '0px -600px',
                offset: 1
            })
        ]))
    ])
])

我已完成以下配置：

• 在app.module.ts中导入BrowserAnimationsModule
• 组件元数据的animations数组已引入该动画
• 模板中通过@mobileNav绑定到目标元素
• 最初使用void => *和* => void定义过渡，切换为:enter和:leave后问题依旧

我在本地复现了相同实现的演示环境中动画可以正常工作，但本地项目始终存在上述问题，请问可能的原因是什么？

内容的提问来源于stack exchange，提问作者Optiq