Animating stroke-dashoffset with Angular?

Question

This is the original demo and it animates the stroke-dashoffset using CSS, however only after the initial state is set or in other words on subsequent changes performed via the input field.

This is the CSS that animates the stroke-dashoffset

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

However with that approach when the percentage property is set initially the stroke does not animate.

So i've tried to use Angular Animation to be able to trigger the animation whenever the dashOffset state is updated.

And this is the animation.

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

And it's added in the template like this:

    <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>

This is the full demo.

Now I did not do this right because no animation is triggered.

Anyone know how to fix it?

Answer 1

OK - With the very helpful hints from Christian Wahl (From Denmark too, so you know the hints are good!!) I changed the animation style to:

'stroke-dashoffset': '*',

And now the animation works. Here's a new demo.

Now I just have to figure out how to get it to trigger for the initial value setting ...