如何在子组件中使用角度动画

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
  ]
})

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

导出动画