Angular 2 Animation mit asynchronen Daten

Question

Ich habe die folgende Komponente, die einfach einen Datensatz von Fähigkeiten mit einem Titel und einem Prozentsatz aus meiner Datenbank abrufen wird.

Mein Ziel ist es, die anfängliche Breite Wert auf jedem div sein 0% und sobald die HTTP-Anfrage zurückgekommen ist und die richtigen Informationen abgerufen wird, legen Sie den richtigen Prozentsatz für jede Fähigkeit mit einer Animation von links nach rechts (Die Divs werden eine Hintergrundfarbe haben, so dass Sie ihre Breite wachsen sehen, zB: 0% ---> 95%).

Ich frage mich, was wäre der beste Ansatz, um dies in einer korrekten Angular 2-Behandlung zu erreichen. Ich weiß, dass es eine Animationseigenschaft gibt, die Sie auf dem Komponentendekorator verwenden können, aber ich bin mir nicht sicher, wie es mit den Async-Ergebnissen funktionieren wird.

Das wichtigste an dieser Frage ist, wie mit den Daten umzugehen ist das kommt durch die asynchrone Leitung in einer Weise herein, dass ich eine Animation für den prozentualen Stoß zeigen kann. Form 0 zu was auch immer es sein wird. Wie es jetzt ist, sehe ich sofort das Endergebnis, aber eine Animation wird nie ausgeführt (und die Animation ist, was ich eigentlich suche, nicht nur das finale Balkenergebnis).

Ich bin mir sicher, es gibt ein paar verschiedene Möglichkeiten, um das zu erreichen, nur verwirrt, was das Beste wäre.

Hier ist meine Komponente:

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() 
    } 
} 

Vielen Dank im Voraus, alle!

Answer 1

Sie können eine CSS-Übergang verwenden wie so:

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

Für Winkel Verwendung etwas wie folgt aus:

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

Answer 2

mit kantigem 4.2+, was wir tun können dass mit @angular/animations.

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

In Komponente Dekorateur wird listParent Animation wie definiert:

wird

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

listParent Animation, wenn Komponenteneigenschaft len Veränderungen ausgelöst werden.

Klicken Sie in this plunker auf die Schaltfläche Get one oder Get multiple.