Question

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

用于显示积分余额的HTML：

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

设置动画和pointsBalance observable的代码：

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查询。您希望在数字增加/减少时进行动画处理，并且动画与添加的元素无关。

Answer 3

我只是按照它的样子粘贴代码，正如 Benjamin Kindle 所说，我试过了，它奏效了：

animations: [
    trigger('valueAnimation', [
      transition(':increment', [
          style({ color: 'green', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ]
      ),
      transition(':decrement', [
          style({ color: 'red', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ]
      )
    ])
  ]

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

3 个答案: