表达式值更改时添加动画 - Angular 5

Question

我在名为'pointsBalance'的页面上有一个表达式，它显示数值。它连接到一个可观察的，当pointsBalance值上升时，我想将颜色更改为绿色然后再返回到其原始颜色，如果颜色值下降则为红色。我以为我可以使用Angular 5新动画别名:increment and :decrement，但我一直遇到问题。

用于显示积分余额的HTML：

<div [@valueAnimation]="pointsBalance">{{ pointsBalance }}</div> 

设置动画和pointsBalance可观察的代码：

import { Component, OnInit, Input } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query, 
    stagger, state, group } from '@angular/animations';
import { CompetitionsService } from "../../../shared/index";
@Component({
  selector: 'points',
  templateUrl: './...html',

  animations: [
    trigger('valueAnimation', [
      transition(':increment', group([
        query(':enter', [
          style({ color: 'green', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({ color: 'red', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ]))
    ])
  ]
})
export class CompetitionDetailsComponent implements OnInit {

  pointsBalance: number;

  constructor(private competitionsService: CompetitionsService, ) { }

  ngOnInit() {

    this.competitionsService.updatePointsBalance$.subscribe(
      (pointsBalance) => {
        this.pointsBalance = pointsBalance;
      }
    )
  }
}

当pointsBalance值发生变化时，我得到此控制台错误：

错误错误：由于以下失败的触发器转换而无法处理动画@valueAnimation失败，原因是：

• query(":enter")返回零元素。 （如果你想允许，请使用query(":enter", { optional: true })。）

有谁知道为什么我收到这个错误？或者有另一种方法来实现这一目标吗？谢谢。

Answer 1

我从here和here找到了修复。

<div [@valueAnimation]="pointsBalance"><span *ngFor="let pointsBalance of [ pointsBalance ]">{{ pointsBalance }}</span></div>

虽然觉得有点hacky。

Answer 2

:enter动画将仅动画新创建的元素。您的“hacky”解决方法之所以有效，是因为只要值发生变化，它就会强制重新创建内部跨度。我想你想要的是删除:enter查询。您希望在数字输入/减少时设置动画，并且您的动画与添加的元素无关。