Анимации в угловых 5 на ngStyle - PullRequest
Новая
       17

Анимации в угловых 5 на ngStyle

0 голосов
/ 07 мая 2018

В следующем коде я хочу применить анимацию к 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 Кто-нибудь может мне помочь?

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

можно попробовать способом:

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, надеюсь, это поможет.

0 голосов
/ 07 мая 2018

В части ngStyle вы не использовали никаких юнитов.попробуйте 'px' или '%'.если div вообще не отображается, используйте неразрывный пробел.это должно работать для вас. 

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