Activate/Deactivate Angular 6个动画
Activate/Deactivate Angular 6 animations
有什么方法可以 "disable" Angular 动画直到特定事件?
例如,我有一个包含一些项目的列表框。每个项目都有这样的动画:
<div class="list--item" [@animFadeOut]>
[ ... ]
</div>
为避免视觉过载,我希望仅在添加新项目时播放此动画,而不是在加载列表并填充所有项目时播放。
实现这种效果的好方法是什么?
谢谢,
如果您提供一个 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'))
])
有什么方法可以 "disable" Angular 动画直到特定事件?
例如,我有一个包含一些项目的列表框。每个项目都有这样的动画:
<div class="list--item" [@animFadeOut]>
[ ... ]
</div>
为避免视觉过载,我希望仅在添加新项目时播放此动画,而不是在加载列表并填充所有项目时播放。
实现这种效果的好方法是什么?
谢谢,
如果您提供一个 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'))
])