javascript - AngularJS，如何更改 CSS 动画规则的值？

Question

我想根据自定义输入更改分配给 stroke-dashoffset 的值。

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

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

但是使用 ng-class 而不是 ng-style 我成功地存档了..有什么想法吗？

这里有一个 fiddle ，代码是:donut chart

提前致谢!法比奥

Answer 1

(根据您的利益调整值(value)观)

1. 分配您的 .donut-chart-1 笔画起始值。您需要的值为 ceil((您的圆的半径)*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*/
}

---

1. 定义动画名称，在本例中为 donut-chart-1 和 stroke-dashoffset 的值以触发动画。目标值是(你的初始值) - (你的初始值) * %。以上面的例子为例，如果你想为 90% 设置动画，则为 44 和 75% 110。

---

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

1. 用之前定义的动画影响 .donut-chart-1 中的 .circle 元素:

---

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

---

您可能不想手动弄乱这些值，因此您可以使用以下 JS 来计算 svg 元素的路径长度，并相应地设置值:

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

完整片段:

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