Можно передать свойство анимации метаданных в Angular

Question

Я реализую анимацию в форме входа в свое приложение, и я использую анимацию Angular , но анимация будет немного большой, и я хотел бы знать, если вы может объявить анимацию в свойстве класса и внутри @Component вызвать переменную, например:

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  animations: this.animation
})

И в классе объявить свойство:

export class AuthComponent implements OnInit, OnDestroy {

  animation: [
    trigger('pageAnimations', [ ...

Возможно ли это сделать так или иначе?

Answer 1

Мне удалось определить const s в отдельном файле и включить его в массив animations.

app.animation.ts

import { trigger, transition, animate, style, state } from '@angular/animations';

export const slideView = trigger(
  'slideView', [
    state('true', style({ transform: 'translateX(100%)', opacity: 0 })),
    state('false', style({ transform: 'translateX(0)', opacity: 1 })),
    transition('0 => 1', animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))),
    transition('1 => 1', animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))),
  ]
);

export const slideInOut = trigger('slideInOut', [
  transition(':enter', [
    style({ transform: 'translateX(100%)', opacity: 0 }),
    animate('600ms ease-in', style({ transform: 'translateX(0%)', 'opacity': 1 }))
  ]),
  transition(':leave', [
    style({ transform: 'translateX(0%)', opacity: 1 }),
    animate('0ms ease-in', style({ transform: 'translateX(100%)', 'opacity': 0 }))
  ])
])

app.component. ts

import { Component } from '@angular/core';
import { slideView, slideInOut } from './app.animation';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [ slideView, slideInOut ]
})
export class AppComponent {
  show: boolean = true;
  toggle(evt): void {
    this.show = !this.show;
  }
}

компонент приложения. html

<p>
  <button mat-button (click)="toggle($event)">Toggle</button>
</p>

<div style="height: 300px; border: 1px solid red" *ngIf="show" [@slideInOut]> IN </div>
<div style="height: 300px; border: 1px solid red" *ngIf="!show" [@slideInOut]> OUT <div>

Рабочий пример: Stackblitz