使用 Angular 制作笔划-dashoffset 动画？

Question

这是原始演示，它使用 CSS 为

stroke-dashoffset

制作动画，但是只有在设置初始状态之后，或者换句话说，在通过输入字段执行后续更改之后。

这是动画的 CSS

stroke-dashoffset

el-circle-progress circle {
  transition: stroke-dashoffset 1s linear;
  fill: none;
}

但是，使用这种方法，当最初设置

percentage

属性时，笔划不会产生动画。

所以我尝试使用 Angular Animation 来在

dashOffset

状态更新时触发动画。

这就是动画。

  animations: [
    trigger('animateStroke', [
      state(
        '*',
        style({
          transition: 'stroke-dashoffset',
        })
      ),
      transition('*<=>*', animate('1s linear')),
    ]),
  ],

它是这样添加到模板中的：

    <circle
      [@animateStroke]="dashOffset"
      id="percent"
      [ngStyle]="this.rotationTransform"
      [attr.cx]="center"
      [attr.cy]="center"
      [attr.r]="options.radius"
      [attr.stroke]="options.percentageStroke"
      [attr.stroke-width]="options.strokeWidth"
      [attr.stroke-dasharray]="circumference"
      [attr.stroke-dashoffset]="dashOffset"
      [attr.stroke-linecap]="options.strokeLineCap"
    ></circle>

这是完整的演示。

现在我没有这样做正确，因为没有触发动画。

有人知道如何解决吗？

Answer 1

好的 - 有了来自 Christian Wahl 的非常有用的提示（也来自丹麦，所以你知道这些提示很好！！）我将动画风格更改为：

'stroke-dashoffset': '*',

现在动画可以运行了。 这是一个新的演示。

现在我只需要弄清楚如何让它触发初始值设置......