非同期データを使用した角2アニメーション

Question

私は以下のコンポーネントを持っています。これは単にデータベースのタイトルとパーセンテージを含むスキルのデータセットを取得します。

私の目標は、各divの最初の幅の値を0％にし、http要求が戻って正しい情報が取得されたら、左から右に行くアニメーションで各スキルに正しい割合を設定します（divは背景色を持つので、幅が拡大するのを見なければなりません、例：0％---> 95％）。

私は正しい角膜治療でこれを達成するための最良の方法が何であるか疑問に思っています。私はあなたがコンポーネントデコレータで使用できるアニメーションプロパティがあることを知っていますが、非同期の結果が出てくるようにする方法についてはわかりません。

この質問に関する最も重要なことは、これは非同期パイプを通して、パーセンテージバンプのアニメーションを表示できるようになります。フォーム0はどんなものにでもなります。今のところ私はすぐに最終結果を見ることができますが、アニメーションは決して実行されません（そして、アニメーションは最終的なバーの結果を印刷するのではなく、私が実際に探しているものです）。

私は確かに、この作業を行うにはいくつかの方法があり、どちらが最善であるかについて混乱していると思います。事前に

import { Component, OnInit } from '@angular/core' 
import { SkillsService } from './skills.service' 

@Component({ 
    selector: 'skills', 
    template: ` 
    <section class="skills"> 
     <div *ngFor="let skill of skillsService.skills$ | async"> 
     <div class="skills__bar" [style.width]="skill.percentage + '%'"> 
      <h3 class="skills__title">{{skill.title}}</h3> 
     </div> 
     </div> 
    </section> 
    `, 
}) 
export class SkillsComponent implements OnInit { 

    constructor(private skillsService: SkillsService) {} 

    ngOnInit() { 
    this.skillsService.fetchSkills() 
    } 
} 

おかげで、すべて：

は、ここに私のコンポーネントです！

Answer 1

あなたがそうのようなCSSトランジションを使用することができます。このような何かの角度を使用するために

//Demo purposes only. 
 
$("#get-skills-btn").on("click", function() { 
 
    var randomValue = Math.random(); 
 
    $(".skills__percentage").css("transform", "scaleX(" + randomValue + ")"); 
 
});

.skills__bar { 
 
    background-color: silver; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.skills__percentage { 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: scaleX(0); 
 
    transform-origin: left; 
 
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
 
} 
 
.skills__title { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="skills"> 
 
    <div> 
 
    <div class="skills__bar"> 
 
     <div class="skills__percentage"></div> 
 
     <h3 class="skills__title">{{skill.title}}</h3> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 
<button id="get-skills-btn"> 
 
    Fetch Data 
 
</button>

を：アンギュラ4.2 +で

[style.transform]="scaleX(skill.percentage/100)"

Answer 2

、私たちにできることそれは@angular/animationsを使用しています。成分デコレータで

<div [@listParent]="len" class="list"> 
    <div *ngFor="let item of itemsAsync | async" [style.width]="item.val" class="item"> 
    {{item.name}} 
    </div> 
</div> 

、listParentアニメーションのように定義される：

animations: [ 
    trigger('listParent', [ 
    transition('* => *', [ 
     query(':enter', style({ width: 0 })), 
     query(':enter', animate('1.6s', style({ width: '*'}))) 
    ]) 
    ]) 

listParentアニメーションはいつでもコンポーネントプロパティlen変更がトリガされます。

には、Get oneまたはGet multipleボタンをクリックしてください。