Angular 忽略动画持续时间？

Question

我正在使用 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 持续时间被忽略了，当我改变状态时我的不透明度会立即改变。

我根据 this 编写了这段代码并适应了我的需要。

我在动画定义中做错了什么？

让我知道这里是否需要其他文件，因为我是 Angular 的新手！

提前致谢！

Answer 1

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

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

当然你必须添加 BrowserAnimationsModule 到你的主模块中的导入：

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 { }

我做了一个StackBlitz using your animation.

更新

您将需要使用 Web 动画 polyfill 在一些情况下。

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

我在 Safari (MacOS) 上测试过，在添加 polyfill (initial StackBlitz) 之前它不起作用，现在可以了。

Angular 忽略动画持续时间？

Angular animation duration ignored?

angular

angular-animations