激活/停用 Angular 6 动画

【问题标题】：Activate/Deactivate Angular 6 animations激活/停用 Angular 6 动画
【发布时间】：2018-10-02 23:34:17
【问题描述】：

有什么方法可以在特定事件之前“禁用”Angular 动画？

例如，我有一个包含一些项目的列表框。每个项目都有这样的动画：

<div class="list--item" [@animFadeOut]>
  [ ... ]
</div>

为避免视觉过载，我希望仅在添加新项目时播放此动画，而不是在加载列表并填充所有项目时播放。

实现这种效果的好方法是什么？

谢谢，

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

如果您提供一个 jsfiddle 示例会更容易，但您可以通过仅在需要时向动画添加状态名称来实现（在需要时切换firstLoadFinished 的值是您的调用）：

<div class="list--item" [@animFadeOut]="firstLoadFinished ? 'newItemAdded' : 'active'">
  [ ... ]
</div>

那么你的动画可能看起来像：

trigger('animFadeOut', [
    state(
        'void',
        style({
            opacity: 0
        })
    ),
    state(
        'active, newItemAdded',
        style({
            opacity: 1
        })
    ),
    transition('void => active', animate('0ms')),
    transition('void => newItemAdded', animate('500ms')),
    transition('* => void', animate('300ms'))
])

【讨论】：

这正是我所需要的！谢谢！