Angular (4, 5, 6, 7) - ngIf 上滑入滑出动画的简单示例

Question

滑入和滑出容器元素的最低限度和 Angular4 的原生方式是什么？

例如

<div ngIf="show">
    <!-- Content -->
</div>

滑入内容(从上到下就像 jQuery。slideDown ())当 show 变为 true 时。

当 show 变为 false 时，

滑出内容(适本地带有缓出效果)。

Answer 1

首先是一些代码，然后是解释。描述这个的官方文档是 here .

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

在你的模板中:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

我发现 angular 的方式有点难以掌握，但一旦你理解了它，它就会变得非常简单和强大。

动画部分使用人类语言:

• 我们将此动画命名为“slideInOut”。

• 添加元素(:enter)时，我们执行以下操作:

• ->立即将元素向上移动 100%(从自身开始)，以显示在屏幕外。

• ->然后对 translateY 值进行动画处理，直到我们处于 0%，元素自然处于该位置。

• 当元素被移除时，将 translateY 值(当前为 0)设置为 -100%(离开屏幕)。

我们使用的缓动函数是 ease-in，在 200 毫秒内，您可以根据自己的喜好更改它。