我正在制作动画:输入和:离开页面。
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() { } }
此动画可在多个组件中重复使用。
在每个组件中都有一个按钮,可以转到具有相同动画的下一页。
我需要使用动画为这些组件创建通用条件,这样动画才会在按下这些按钮时起作用。可以借助某种常见的服务。
每次进入动画页面时此动画都有效,我只需要在点击这些按钮时动画才能工作。