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

只要组件属性listParent发生变化，就会触发

len动画。

在this plunker中，点击Get one或Get multiple按钮。

具有异步数据的角度2动画

2 个答案: