在角度2+中,如何在特定条件下动态管理动画的添加(:enter和:leave)?

时间:2018-02-06 10:57:24

标签: angular angular2-animation

我正在制作动画:输入和:离开页面。

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() {
  }
}

此动画可在多个组件中重复使用。

在每个组件中都有一个按钮,可以转到具有相同动画的下一页。

我需要使用动画为这些组件创建通用条件,这样动画才会在按下这些按钮时起作用。可以借助某种常见的服务。

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

0 个答案:

没有答案