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

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

@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';
}

---

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

您必须将动画保存在共享文件中。这样，管理它对您将非常有帮助

你可以看到这个-

在

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

。另外，从

共享/animation/index