It is possible to pass a property to the metadata animations in Angular

user_12609710 0
Viewed 214

I'm implementing an animation in the login form of my application and I'm using Angular's animations, but the animation will be a little big and I would like to know if you can declare the animation in a property in the class and inside the @Component call the variable, example:

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

And in the class declare property:

export class AuthComponent implements OnInit, OnDestroy {

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

Would it be possible to do this in some way or in another way perhaps?

angular animation
1 Answers

I was able to define consts in a separate file and include it in the animations array.

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

app.component.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>

Working example: Stackblitz

user_65139210
Related