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 Animations polyfill。

我更新了the StackBiltz。您可能必须根据配置不同地导入polyfill。

我在Safari（MacOS）上测试过，在添加polyfill（initial StackBlitz）之前它没有用，现在确实如此。

角度动画持续时间被忽略了？

1 个答案: