带有异步数据的 Angular 2 动画

Question

我有以下组件，它将简单地从我的数据库中获取包含标题和百分比的技能数据集。

我的目标是让每个 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()
  }
}

在此先感谢大家！

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>

对于角度使用这样的东西：

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

Answer 2

在 Angular 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: '*'})))
    ])
  ])

每当组件属性len更改时，都会触发listParent动画。

在这个 plunker 中，尝试单击Get one或Get multiple按钮。