Angular

Question

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

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

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

Stackblitz link

Answer 1

我会按照 Defining animations and attaching them to the HTML template 中的 angular 文档进行操作，并在动画上设置不同的状态（在本例中显示和隐藏）以及从显示到隐藏的过渡：

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() 并且状态属性从 'shown' 变为 'hidden' 时才会第一次执行动画。

Angular - 页面加载动画

Angular - Animate on page load

angular-animations