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动画与异步数据

回答

相关问题