Angular Animations - нежелательная прокрутка страниц при автоматической анимации высоты

Question

У меня есть форма, в которой пользователи могут выбирать телевизионные каналы из списка, которые затем добавляются в общую корзину. Я также создал директиву, которая будет анимировать высоту суммарной корзины при выборе нового канала.

Ниже приведена директива:

@Directive({
  selector: '[animateHeight]',
})
export class SmoothHeightAnimDirective implements OnChanges {
  @Input() trigger: any;

  startHeight: number;
  pulse: boolean;

  constructor(private element: ElementRef) {}

  @HostBinding('style.display') display = 'block';

  @HostBinding('@grow')
  get grow() {
    return {
      value: this.pulse,
      params: {
        startHeight: this.startHeight,
      },
    };
  }

  ngOnChanges() {
    this.startHeight = this.element.nativeElement.clientHeight;
    this.pulse = !this.pulse;
  }
}

Ниже показана анимация, которая обрабатывает изменение высоты:

export const smoothHeight = trigger('grow', [
  transition('void <=> *', []),
  transition('* <=> *', [style({ height: '{{startHeight}}px' }), animate('.5s ease')], {
    params: {
      startHeight: 0,
    },
  }),
]);

А в компоненте директива используется следующим образом:

<div animateHeight [trigger]="selectedOffers.length">

В основном у меня проблема с анимацией, которая работает должным образом, однако, когда вы выбираете канал с общей корзиной, он неожиданно прокручивается до нижней части общей корзины.

Если кто-нибудь может помочь мне выяснить, почему это происходит, это было бы здорово.