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

Question

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

例如

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

当 show 变为 true 时， 滑入 内容（就像 jQuery.slideDown () 一样从上到下）。

当 show 变为 false 时 滑出 内容（适合具有缓出效果）。

原文由 abdul-wahab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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>

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

动画部分采用人类语言：

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

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

• -> 立即将元素向上移动 100%（从其自身），以显示在屏幕外。

• -> 然后为 translateY 值设置动画，直到我们达到 0%，即元素自然所在的位置。

• 移除元素后，将 translateY 值（当前为 0）设置为 -100%（屏幕外）。

我们使用的缓动功能是缓入，在 200 毫秒内，您可以根据自己的喜好进行更改。

希望这可以帮助！

原文由 Hoff 发布，翻译遵循 CC BY-SA 4.0 许可协议