Angular - 页面加载动画答案

【问题标题】：Angular - Animate on page loadAngular - 页面加载动画
【发布时间】：2020-05-11 23:23:13
【问题描述】：

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

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

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

Stackblitz link

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

我会像 Defining animations and attaching them to the HTML template 中的角度文档那样做，并在动画上设置不同的状态（在这种情况下显示和隐藏）以及从显示到隐藏的过渡：

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"

你可以在this stackblitz link看到最终结果。

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

【讨论】：