ngStyle 上角 5 的动画答案

【问题标题】：Animations in angular 5 on ngStylengStyle 上角 5 的动画
【发布时间】：2019-06-10 16:41:46
【问题描述】：

在以下代码中，我想在 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>

所以在屏幕截图中蓝色条将显示为动画
我是 angular5 新手，谁能帮帮我？

【问题讨论】：

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

标签： html ionic3 angular5 angular-animations

【解决方案1】：

在 ngStyle 部分你没有使用任何单位。尝试 'px' 或 '%' 。如果 div 根本没有渲染，请使用不间断空间。这应该适合你。

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

【讨论】：

【解决方案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，希望对您有所帮助。

【讨论】：