javascript - 具有异步数据的 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>

对于 Angular 使用这样的东西:

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