时间戳

首页 > 解决方案 > Angular - 页面加载动画

angular - Angular - 页面加载动画

问题描述

我正在尝试创建一个动画，其中顶部 div 滑出，显示下面页面的内容。以下是我的动画

animations: [
   trigger("myAnimationTrigger", [
      transition('void => *', [
       style({ transform: 'translateY(0%)'}),
       animate('1500ms',style({transform: 'translateY(100%)', display:'none', opacity: 0}))
     ]),
   ])
]

目前动画发生了，但红色的 div 又回来了。我认为使用显示无会使其在动画结束时消失。其次，如果我希望动画通过向上滚动 div 来显示页面，那将是什么转换？

Stackblitz 链接

标签： angularangular-animations

解决方案

我会按照定义动画并将它们附加到 HTML 模板中的角度文档中的方式进行操作，并在动画上设置不同的状态（在这种情况下显示和隐藏）以及从显示到隐藏的过渡：

animations: [
  trigger("myAnimationTrigger", [
    state('shown', style({
      transform: 'translateY(0%)'})
    ), state('hidden', style({
      transform: 'translateY(100%)', display:'none', opacity: 0})
    ), transition('shown => hidden', [
      animate('0.5s')
    ]),
  ])
]

然后，在组件中设置一个变量来保存当前状态：

state = 'shown';

并在 AfterViewInit 中加载组件后更改此状态变量：

ngAfterViewInit() {
  setTimeout( () => {
    this.state = 'hidden';
  }, 200);
}

此变量用于触发动画的模板：

[@myAnimationTrigger]="state"

你可以在这个 stackblitz 链接上看到最终结果。

动画只会在第一次执行 ngAfterViewInit() 并且状态属性从“显示”更改为“隐藏”时完成。

推荐阅读