我正在制作动画：输入和：离开页面 .

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

export const slideInDownAnimation: AnimationEntryMetadata = trigger('routeAnimation', [
    state('*',
        style({
            transform: 'translateY(0)'
        })
    ),
    transition(':enter', [
        style({
            transform: 'translateY(100%)'
        }),
        animate('.5s linear')
    ]),
    transition(':leave', [
        animate('.5s linear', style({
            transform: 'translateY(-100%)'
        }))
    ])
]);

在组件中：

import { slideInDownAnimation } from './../route-animation/animations';
import { Component, OnInit, HostBinding } from '@angular/core';

@Component({
  selector: 'app-building',
  templateUrl: './building.component.html',
  styleUrls: ['./building.component.scss'],
  animations: [
    slideInDownAnimation
  ]
})
export class BuildingComponent implements OnInit {

  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  constructor() { }

  ngOnInit() {
  }
}

这个动画在几个组件中重用 .

在每个组件中都有一个按钮，可以使用相同的动画转到下一页 .

我需要使用动画为这些组件创建通用条件，以便动画仅在按下这些按钮时才起作用 . 可以借助某种共同的服务 .

每次进入动画页面时，此动画都有效，我只需要在单击这些按钮时动画才能工作 .

angular angular2-animation