Angular 2動畫與異步數據

我有以下組件，它將簡單地從我的數據庫中獲取包含標題和百分比的技能數據集。Angular 2動畫與異步數據

我的目標是讓每個div的初始寬度值爲0％，並且一旦http請求回來並且正確的信息被回收，就使用從左到右的動畫爲每個技能設置正確的百分比（div會有背景色，所以你應該看到它的寬度增加，例如：0％---> 95％）。

我想知道什麼是在正確的Angular 2治療中實現這一點的最佳方法。我知道有一個動畫屬性可以在組件裝飾器上使用，但我不確定如何使它與異步結果一起工作。

這個問題最重要的是如何處理數據通過異步管道進入，可以顯示百分比凹凸的動畫。形式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() 
    } 
}

謝謝大家！

來源

2016-12-27 deathandtaxes

您可以使用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>

對於角度使用這樣的事情：

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

來源

2016-12-27 22:22:19 Ricky

嘿，瑞奇！非常感謝您花時間回答。雖然這是一種用CSS解決百分比問題的方法，但實際上我可能會將這種方法用於樣式本身，但它並不能解決最緊迫的問題，即處理異步數據。異步管道處理響應（這是非常小的，因此很快），我立即看到綠色部分，沒有動畫。所以我幾乎在同一個地方，看到了最終的結果，而不是動畫到達那裏...... – deathandtaxes

具有角4.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變化。

在this plunker中，請嘗試單擊Get one或Get multiple按鈕。

來源

2017-08-08 22:17:34 bob

Angular 2動畫與異步數據

回答

相關問題