AngularJS, how to change value of a CSS animation rule?

Question

I would like to change the value assigned to stroke-dashoffset basing on a custom input.

    @-webkit-keyframes donut-chart-1 {
      to {
        stroke-dashoffset: 100;
      }
    }

    @keyframes donut-chart-1 {
      to {
        stroke-dashoffset: 100;
      }
    }

But with ng-class and neither ng-style I succeed in archive that.. Any idea?

Here a fiddle where the code is: donut chart

Thanks in advance! Fabio

I don't understand the question. Where is your problem? The code seems to work fine. Also, you don't need the webkit keyframes anymore. — Christoph
– Christoph, Commented Mar 9, 2017 at 18:40
Thanks. As you can see, I have the percentage value hard coded in the CSS. Changing that value, the percentage of the donut chart changes too. So, if I want to change that 110 (75%) to a new one..how can I do in a angular webapp? Hope I clarified more my question.. — Micky
– Micky, Commented Mar 9, 2017 at 19:17

Christoph · Accepted Answer · 2017-03-09 19:10:22Z

2

(Tweak values to your benefit)

Assign your .donut-chart-1 stroke start off values. The value you need is ceil((radius of your circle)*2*Pi).

.donut-chart-1 {
  stroke-dasharray: 440;  /* circumference of your circle */
  stroke-dashoffset: 440; /* set the offset, so you start with a gap, not the dash*/
}

Define the animation name, in this case donut-chart-1 and the value for stroke-dashoffset to trigger the animation. The target value is (your initial value) - (your initial value) * %. Taking the above example, if you want to animate 90%, it would be 44 and 75% 110.

@keyframes donut-chart-1 {
  to {
    stroke-dashoffset: 110; /* animates 75% */
  }
}

Impact the .circle element inside .donut-chart-1 with the previously defined animation:

.donut-chart-1 .circle {
    animation: donut-chart-1 1s ease-out forwards;
}

You probably don't wanna mess with these values by hand, so you could use the following JS, to calculate the path lenght of your svg element, and set the values accordingly:

var path = document.querySelector('circle');
var length = path.getTotalLength();

Full snippet:

.item {
  position: relative;
  float: left;
}

.item h2 {
  text-align: center;
  position: absolute;
  line-height: 125px;
  width: 100%;
}

svg {
  transform: rotate(-90deg);
}

.donut-chart-1 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

.donut-chart-1 .circle {
  -webkit-animation: donut-chart-1 1s ease-out forwards;
  animation: donut-chart-1 1s ease-out forwards;
}

@keyframes donut-chart-1 {
  to {
    stroke-dashoffset: 110;
  }
}

<div class="item donut-chart-1">
  <h2>HTML</h2>
  <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle" r="70.14149" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

edited Mar 9, 2017 at 19:10

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Mar 9, 2017 at 18:25

Syden

8,6455 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Syden Over a year ago

Thanks for the additions Christoph, it was nice of you. Regards.

Micky Over a year ago

Hey Christoph, first of thanks for your answer! But I don't know if this is what I need, or maybe I didn't understand the javascript part.. What I need is to understand how technically, if possible, change values stored in stroke-dasharray, stroke-dashoffset, etc.. dynamically. For instance, from a input data set (json object) I have width, heigh. and in the HTML is easy to manipulate width just substituting the value with {{data.width}} ...how can I do the same with those values hardcoded in the CSS?!

Collectives™ on Stack Overflow

AngularJS, how to change value of a CSS animation rule?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related