Html ngStyle上angular 5中的动画

在下面的代码中，我想在div[ngStyle]=“{'width'：object.widthValue}”上应用动画
当宽度增加时，将设置动画

<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>

{{object.yLable}
{{object.widthValue}{{object.unit}
{{object.endLabel}

因此，在屏幕截图中，蓝色条将像动画一样显示
我是安格拉尔的新手，有人能帮我吗

---

在ngStyle部分中，您没有使用任何单位。请尝试“px”或“%”。如果div根本没有渲染，则使用非中断空间。这应该对你有用

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

---

在ngStyle部分中，您没有使用任何单位。请尝试“px”或“%”。如果div根本没有渲染，则使用非中断空间。这应该对你有用

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

---

您可以尝试以下方法：

html:

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

---

虽然css布局可能不适合您的。关键词可能是

转换

，希望对您有所帮助

您可以尝试以下方法：

html:

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

---

虽然css布局可能不适合您的。关键词可能是

转换

，希望对您有所帮助

请澄清您的问题。@Utpaul在图像中用简单的词语表示，有一个模糊条，我为其提供了动态值。该蓝色条应缓慢滑动。如何在动态宽度上应用动画请澄清您的问题。@Utpaul在图像中用简单的词语表示，有一个模糊条，我为其提供了动态值。该蓝色条应缓慢滑动如何在动态宽度上应用动画