一旦为数据创建服务,动画就会停止工作。看起来是因为最初加载页面时,ng-repeat中没有任何元素(因为它正在获取数据)。似乎与THIS和THIS类似:
错误:
ERROR Error: Unable to process animations due to the following failed trigger transitions @listAnimation has failed due to:
- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)
动画:
trigger('listAnimation', [
transition('* => *', [
query(':enter', style({ opacity: 0}), { optional: true }),
query(':enter', stagger('150ms', [
animate('.5s ease-in', keyframes([
style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
]))
]))
])
])
HTML:
<div [@listAnimation]>
<div *ngFor="let member of members" class="member-card">
member info goes here...
</div>
</div>
现在在您说"put in { optional: true } like the error message says"
之前...我做到了-它消除了错误消息,但实际上并没有使动画正常工作:
trigger('listAnimation', [
transition('* => *', [
query(':enter', style({ opacity: 0}), { optional: true }),
query(':enter', stagger('150ms', [
animate('.5s ease-in', keyframes([
style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
]))
]), {optional: true})
])
])
请记住,在将数据从应用程序组件中删除之前,所有这些都有效。数据在那里,应用程序正常运行,只是此动画不再起作用。
您必须确保仅在members数组不为空时显示列表容器。这样,仅当列表中有内容时,动画才会触发。
<div [@listAnimation] *ngIf="members.length > 0>
<div *ngFor="let member of members" class="member-card">
member info goes here...
</div>
</div>