Animations in angular 5 on ngStyle

Question

In following code I want to apply animations on div [ngStyle]="{'width': object.widthValue}"
When width increase that will animated

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

So In screenshot blue bar will be show as like animations
I am new to angular5 Can anyone help me out?

@Utpaul In simple words in image there is blur bar for which I have given dynamic values.That blue bar should slides slowly How can I apply animation on dynamic width — Gitaram Kanawade, May 07 '18 at 09:57

Masso · Answer 1 · 2018-05-07T10:18:49.347

2

In the ngStyle part you didn't used any units. try 'px' or '%' . if the div didn't rendered at all use non-breaking space . this should work for you.

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

edited May 07 '18 at 10:18

answered May 07 '18 at 10:13

Masso

56
4

score 0 · Answer 2 · answered Jun 10 '19 at 08:41

you can try in the way:

html:

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

less:

.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;
  }
}

while the css layout may not fit yours. The key word may be the transition, hope it helps.

Animations in angular 5 on ngStyle

2 Answers2