Angular increment增量动画执行后无法停留在最终位置如何解决？

问题根因 #

1. :increment 是Angular动画的过渡触发匹配符，仅可用于transition参数匹配状态变化，不能作为state的状态名使用，之前定义的state(':increment')完全无效。
2. 调整后的过渡逻辑写反：先设置起始样式为marginTop: '-7em'，再动画到style('*')（即元素CSS默认的margin-top: 0em），和预期动画方向完全相反。
3. CSS中添加的animation-fill-mode: forwards仅对原生CSS @keyframes动画生效，Angular动画基于Web Animations API实现，不会读取该属性，因此不生效。
4. 未定义与绑定值匹配的状态规则：Angular动画默认会在动画结束后移除临时添加的内联样式，回到CSS初始值，只有定义了对应state的样式才会持久保留。

修复方案 #

直接用*通配符匹配countAllOrders的任意数值作为状态，绑定最终要保留的样式即可，代码如下：

动画代码

animations: [
  trigger('ordersValue', [
    // 通配符匹配countAllOrders的所有取值，状态固定保留marginTop为-7em
    state('*', style({
      marginTop: '-7em'
    })),
    transition(':increment', [
      // 从当前margin值（默认0em）动画到state定义的-7em
      animate('1s ease')
    ])
  ])
]

冗余CSS清理

可以移除.digits样式中针对动画的配置，Angular动画会接管过渡逻辑：

.digits {
  list-style-type: none;
  margin-top: 0em;
}

生效原理 #

当countAllOrders递增触发:increment过渡后，Angular会自动将匹配到的state('*')对应的样式作为内联样式持久绑定在元素上，不会在动画结束后被移除，因此margin-top: -7em会一直保留。

内容的提问来源于stack exchange，提问作者yariv bar