Question

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

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

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

但是使用ng-class和ng-style我都没有成功存档...有什么想法吗？

这里是代码为donut chart

的小提琴

提前致谢！法比奥

Answer 1

（根据您的利益调整价值）

指定.donut-chart-1笔画开始值。您需要的值是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*/
}

定义动画名称，在本例中为donut-chart-1，以及stroke-dashoffset的值以触发动画。目标值为(your initial value) - (your initial value) * %。以上面的例子为例，如果你想要制作90％的动画，它将是44和75％110。

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

使用之前定义的动画影响.circle内的.donut-chart-1元素：

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

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

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

完整摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: