激活/停用Angular 6动画

时间:2018-10-02 15:23:18

标签: angular angular-animations

有什么方法可以“禁用” Angular动画直到某些事件?

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

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

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

什么是达到这种效果的好方法?

谢谢

1 个答案:

答案 0 :(得分:0)

如果提供了一个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'))
])