0

I'm using angular animations and CSS animations to animate the progress in svg progress gauge. When I open the page on firefox, my animations are fired twice (once for the angular animations and once for the css animations). This doesn’t occur on chrome. Is there a way to fix this? Can I temporarily pause the CSS animations when the page loads on firefox browser?

app.component.ts: (i only attached the code snippet of the svg that uses the animation)

    <path #progressPath
        id= "{{ idStr }}"
        [attr.d]="describeArc(90, 270, 1, 1)"
        class="rpb-arc"
        [style.stroke-dasharray]="'0' + ', ' + circumference"
        [class.rpb-arc-done]="amount === maxValue"
        [style.stroke-width.px]="strokeWidth"
        [@progress]="{
          value: !disabled,
          params: {
            default: '0' + ', ' + circumference,
            final:
              (circumference / 2) * (amount / maxValue) + ', ' + circumference
          }
        }"
      ></path> 

   animations: [
    trigger('progress', [
      state(
        'true',
        style({
          'stroke-dasharray': '{{final}}'
        }),
        { params: { default: '0,100', final: '100,100' } }
      ),
      transition('* => true', [animate('2s')]),
      transition('* => false', [animate('0s')])
    ])
  ]

CSS:

  .rpb-arc {
    fill: transparent;
    stroke-linecap: round;
    transition: stroke-dasharray 2s ease-in;
    animation-fill-mode: forwards;
  }
Jay
  • 9
  • 2
  • How do you know that its once for the angular and once for css ? – Rohit Gupta Oct 06 '22 at 03:22
  • I altered the timing on the angular animation to .5s, and 2 firings will happen (one at .5s-angular, one at 2s-css animation). – Jay Oct 06 '22 at 03:30
  • Also wierdly, if i put the angular animation at 0s (so essentionally 0 angular animations), there is no animations at all. – Jay Oct 06 '22 at 03:31
  • I am not familiar with angular, but it seems to me that if you are doing some animation with it (presumably using javascript) and then there is some animation in css, then both are going to fire. Different browsers may have different timings on it. – Rohit Gupta Oct 06 '22 at 03:33
  • Is there a way to prevent the css animation from firing on page load in the firefox browser specifically though? – Jay Oct 06 '22 at 03:42
  • Not really, because i need the css to be disabled only in the beginning for firfox, but enabled afterwards – Jay Oct 06 '22 at 04:03
  • That shows you how to detect firefox - which was part of it. For the rest, change the class name at the correct time. – Rohit Gupta Oct 06 '22 at 04:05
  • Yes but how do i change the class name at the correct time? Its a non interactive svg. – Jay Oct 06 '22 at 04:07

0 Answers0