Angular 忽略角度动画持续时间？

我正在用Angular学习动画，但我被卡住了

以下是我的简单淡入淡出动画：

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   animations:[
     trigger('formState',[
       state('hidden',style({
         opacity: 0
       })),
       state('visible',style({
         opacity: 1
       })),
       transition('hidden => visible', animate("1s ease-in")),
       transition('visible => hidden', animate("1s ease-in"))
     ])
   ]
})

我指定的

1s

的持续时间似乎被忽略，当我更改状态时，我的不透明度会立即改变

我已经根据自己的需要编写了这段代码

我在定义我的动画时做错了什么

如果这里需要其他文件，请告诉我，因为我是

Angular

的新手

---

提前谢谢

您发布的代码没有问题，因此您可能忘记在组件中添加动画模块：

import { animate, state, style, transition, trigger } from '@angular/animations';

当然，您必须在主模块的导入中添加：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserAnimationsModule, BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我发了一封信

更新

您将需要在几种情况下使用

我更新了。根据您的配置，可能需要以不同方式导入polyfill

---

我在Safari（MacOS）上进行了测试，在添加polyfill（）之前它不起作用，现在它起作用了。

我的导入是正确的。这是否与我使用Safari有关？在这里，您的示例（除了hello组件之外，与我的示例非常相似）可以在Firefox上运行。我会在家里的Mac电脑上看起来更好，然后告诉你。非常感谢。