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的引用，这会导致错误。另外，我似乎无法像这样在Angular动画中使用我的函数：

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

因为这会导致此错误：

uncaught TypeError: Cannot read property 'getSkewedOffset' of undefined

我也不能使此函数静态化，因为它需要div的高度。但是我试过使用高度恒定的静态函数，如果高度实际上是固定的，则可以使用。

我将如何在动画中使用这样的计算值？

如何使用div高度

0 个答案: