1

我正在为页面中的 :enter 和 :leave 制作动画。

从'@angular/core'导入{动画，AnimationEntryMetadata，状态，样式，过渡，触发器}；

导出 const slideInDownAnimation: AnimationEntryMetadata = trigger('routeAnimation', [
    状态（'*'，
        风格（{
            变换：'translateY(0)'
        })
    ),
    过渡（'：进入'，[
        风格（{
            变换：'翻译Y（100％）'
        }),
        动画（'.5s 线性'）
    ]),
    过渡（'：离开'，[
        animate('.5s 线性', style({
            变换：'translateY(-100%)'
        }))
    ])
]);

在组件中：

从'./../route-animation/animations'导入{slideInDownAnimation}；
从'@angular/core'导入{组件，OnInit，HostBinding}；

@零件（{
  选择器：'应用程序构建'，
  templateUrl: './building.component.html',
  styleUrls: ['./building.component.scss'],
  动画：[
    slideInDown动画
  ]
})
导出类 BuildingComponent 实现 OnInit {

  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') 位置 = '绝对';

  构造函数（）{}

  ngOnInit() {
  }
}

并且这个动画在几个组件中被重用。

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

我需要用动画为这些组件创建通用条件，以便动画只有在按下这些按钮时才起作用。可以借助某种通用服务。

每次您进入动画页面时，此动画都会起作用，而我只需要仅在单击这些按钮时动画才能起作用。

4

0 回答 0