Как анимировать компонент в Angular с вычисленным значением с высотой div

Question

Я хочу замаскировать изображение как параллелограмм, наклонив родительский div и наклонив изображение внутри него назад, что прекрасно работает во всех браузерах, но перекос приводит к смещению изображения внутри div.Теперь мне также нужно анимировать изображение внутри маски: оно должно двигаться слева направо после запуска компонента.Я могу рассчитать смещение и сместить изображение на эту величину вручную со следующим расчетом:

tan(skewDegree) * (heightOfDiv / 2)

Однако мне нужна высота div для этого вычисления, что приводит кследующий код:

  getSkewedOffset(): number {
    let rad = ParallelogramComponent.SKEW_DEGREE * Math.PI / 180; //Convert from degree to rad
    let height = this.parallelogramRef.nativeElement.offsetHeight;
    return Math.tan(rad) * (height / 2) //This calculates the offset that comes from skewing the div
  }

Ссылка на parallelogramRef не инициализируется, пока не завершится инициализация и рендеринг компонента, что приводит к ошибке.Кроме того, я не могу использовать свою функцию внутри угловой анимации, например:

animations: [
    trigger('bgSliderTrigger', [
      transition(':enter', [
        style({
          left: this.getSkewedOffset()
        }),
        animate(...)
      ])
    ])
  ]

, поскольку это приводит к этой ошибке:

uncaught TypeError: Cannot read property 'getSkewedOffset' of undefined

iтакже не может сделать эту функцию статической, так как ей нужна высота div.Однако я попытался использовать статическую функцию с постоянной высотой, которая работала бы, если бы высота была фактически фиксированной.

Как бы я использовал вычисленное значение, подобное этому, внутри анимации?