如何在子组件中使用 angular 动画

Question

我在应用程序组件中定义了一个动画

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('fade', [
      state('void', style({
        opacity: 0
      })),
      transition(':enter, :leave', [
        animate(4000)
      ])
    ])
  ]
})
export class AppComponent {
  title = 'app';
}

我想在子组件中应用动画而不在子组件中重新定义它，我该如何实现

Answer 1

您必须将动画保存在共享文件中。那样对你管理起来真的很有帮助。

你可以看到这个 - https://github.com/commutatus/angular-starterpack/tree/master/src/app/shared

在shared/animations中你会找到动画，然后你可以在你的组件中导入这些动画。

用于在组件中导入 -

import {fadeIn} from '~app/shared/animations/index';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  animations: [
    fadeIn
  ]
})

注意 - 不要忘记在 app.module.ts 中导入 BrowserAnimationModule。此外，从 shared/animation/index

导出动画

如何在子组件中使用 angular 动画

How to use angular animation in child component

angular

angular-animations