无法处理动画 - 返回零元素答案

【问题标题】：Unable to process animations - returned zero elements无法处理动画 - 返回零元素
【发布时间】：2018-03-03 07:30:29
【问题描述】：

为我的数据创建服务后，动画停止工作。看起来这是因为当页面最初加载时，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})
      ])
    ])

请记住，在将数据从应用组件中取出之前，这一切都已经奏效。数据在那里，应用程序正常运行，只是这个动画不再起作用了。

【问题讨论】：

晚了，但我认为您需要像这样添加动画数组的长度：[@listAnimation]='members.length'

标签： angular typescript angular-animations

【解决方案1】：

确保仅当成员数组不为空时才显示您的列表容器。这样，只有当您的列表中有内容时才会触发动画。

<div [@listAnimation] *ngIf="members.length > 0">
    <div *ngFor="let member of members" class="member-card">
      member info goes here...
    </div>
</div>

【讨论】：