Question

我正在使用随RC2版本发布的angular2的新动画，除了相当庞大的细节外，它的效果非常好。

我正在从一组消息或通知中循环，因为我调用它们，而不是推送到数组我使用unshift(message)将它添加到第一个索引，以便它首先显示而不是持续。由于索引问题而删除项目时，它也有帮助。

现在，当我使用unshift添加新项目时，由于整个数组必须使用正确的索引进行更新，因此所有项目都会重新运行其动画。这对我来说似乎是个错误，但也许有些东西我不知道了？

@Component({
  selector: 'notifications',
  templateUrl: './app/assets/scripts/modules/notifications/notifications.component.html',
  styleUrls: [
    './app/assets/scripts/modules/notifications/notifications.component.css',
    './app/assets/styles/angular2-library.css'
  ],
  inputs: [
    'type',
    'position'
  ],
  animations: [
    trigger('notiState', [
      state('in', style({
        transform: 'translateX(0)',
        opacity: '1',
        visibility: 'visible'
      })),
      transition('void => in', [
        animate('600ms ease', keyframes([
          style({transform: 'translateX(100%)', opacity: '0', offset: 0}),
          style({transform: 'translateX(-40px)', opacity: '1', offset: 0.3}),
          style({transform: 'translateX(0)', opacity: '1', offset: 1})
        ]))
      ]),
      transition('in => void', [
        animate('300ms ease-out', keyframes([
          style({transform: 'translateX(0)', opacity: '1', offset: 0}),
          style({transform: 'translateX(-40px)', opacity: '1', offset: 0.7}),
          style({transform: 'translateX(100%)', opacity: '0', offset: 1})
        ]))
      ])
    ])
  ]
})

export class NotificationsComponent {
  public notifications: string[] = [];

  constructor(private _globals: GlobalVariablesService, private _notificationsApi: NotificationsApiService) {
    this.ns = _globals.ns;

    _notificationsApi.newNotification$.subscribe(
      notification => {

        this.notifications.unshift(notification);

        setTimeout(() => {

          //This appears to be working now when we're unshifting and then popping instead of pushing and popping
          for (let existingNotification of this.notifications) {

            if (existingNotification.id === notification.id) {
              this.notifications.pop();
            }
          }
        }, 2000);
      }
    )
  }
}

使用unshift添加新项而不是push

0 个答案: