动画启动缓慢

Question

我有一个角度分量，带有以下代码：

  public animateElement(element: HTMLElement, styleProperty: string, newValue: number) {
    const currentValue = this.convertToNumber(element.style.width);
    const direction: Direction = (newValue > currentValue) ? Direction.INCREASING : Direction.DECREASING;

    let currIntValue = this.convertToNumber(element.style.width);
    if (element && (!isNaN(currentValue))) {

      const interval = setInterval(() => {

        if (direction === Direction.INCREASING) {
          currIntValue++;
          element.style.width = currIntValue + 'px';
          if (currIntValue >= newValue) {
            clearInterval(interval);
          }
        } else {
          currIntValue--;
          element.style.width = currIntValue + 'px';
          if (currIntValue <= newValue) {
            clearInterval(interval);
          }
        }

        //console.log(element.style.width,  currIntValue, newValue, direction);
      }, 0);
    }
  }

  private convertToNumber(value: string) {
    return Number(value.replace('px', ''));
  }

但是，发射时大约需要一秒钟才能开始动画制作。请有人让我知道这是什么原因吗？