ngStyle上的角度为5的动画

Question

在下面的代码中，我想在div [ngStyle] =＆＃34; {＆＃39; width＆＃39;：object.widthValue}＆＃34;上应用动画;
当宽度增加时，将动画

<ion-row *ngFor="let object of barArray">
          <ion-col class="cityTxt" col-3>{{object.yLable}}</ion-col>
          <ion-col col-9>
            <div class="lksDiv">
              <b>{{object.widthValue}}</b> {{object.unit}}</div>
            <div class="greyline">
              <div class="blueline"  [ngStyle]="{'width': object.widthValue}"></div>
            </div>
            <div class="lastLks">{{object.endLabel}}</div>
          </ion-col>
        </ion-row>

所以在屏幕截图中，蓝色栏会像动画一样显示 我是angular的新手5任何人都可以帮助我吗？

Answer 1

在ngStyle部分，您没有使用任何单位。试试'px'或'％'。如果div没有渲染，则使用不间断的空间。这对你有用。

<div class="blueline" [ngStyle]="{'width': object.widthValue+'%'}" > &nbsp;</div>

Answer 2

您可以尝试以下方式：

html：

<div class="greyline">
    <div class="blueline"  [ngStyle]="{'width': object.widthValue}"></div>
</div>

少：

.grayline {
  height: 8px;
  width: 100%;
  background-color: #fec701;
  border-radius: 4px;

  .blueline {
    height: 8px;
    width: 0;
    background-color: #184576;
    border-radius: 4px;
    transition: all .6s ease-in-out;
  }
}

，而CSS布局可能不适合您。关键字可能是transition，希望对您有所帮助。