Как использовать анимацию angular в дочернем компоненте - PullRequest
Новая
       43

Как использовать анимацию angular в дочернем компоненте

0 голосов
/ 30 мая 2020

У меня есть анимация, определенная в компоненте приложения 

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

Я хочу применить анимацию в дочернем компоненте, не переопределяя ее в дочернем компоненте, как я могу этого добиться

1 Ответ

1 голос
/ 30 мая 2020

Вы должны хранить свои анимации в общем файле. Таким образом, вам будет очень полезно управлять им.

Вы можете увидеть это - 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

...