javascript - 如何将 jQuery 函数应用于内联 CSS

Question

我一直在使用我找到的零碎东西组装一个动画统计圈计数器。圆圈的中心是数字统计数据，我在它运行时成功地从零开始计数。

<div class="single-circle">
  <h6 class="counter stat">50</h6>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165" class="circle-svg">
    <g id="circles" data-name="circles">
      <circle class="back-circle" cx="82.5" cy="82.5" r="75" />
      <circle class="front-circle" cx="82.5" cy="82.5" r="75" style="stroke-dashoffset: -235px;" />
    </g>
  </svg>
</div>

这是 jQuery:

$('.counter').each(function () {
    var $this = $(this);
    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
        duration: 2000,
        easing: 'swing',
        step: function () {
            $this.text(Math.ceil(this.Counter));
        }
    });
});

我现在想通过定位内联样式选择器“strokedash-offset”将相同的功能应用于“.front-circle”，以便让圆圈与数字计数器一起动画，但我正在努力实现这一目标。

完整的 JS Fiddle 与 SCSS 在这里:https://jsfiddle.net/ch8phcbd/

澄清一下，我想定位并操纵内联样式选择器的值，以实现此目的并避免在 jQuery 中放置可变值，因为在最终版本中，该值将被动态拉入 View 页面。

感谢任何帮助。

谢谢!

Answer 1

https://jsfiddle.net/vvkqmqLm/4/

计算偏移量然后应用它:

 var r = $circle.attr('r');
 var c = Math.PI*(r*2);

 (val < 0) { val = 0;}
 (val > 100) { val = 100;}

 pct = ((100-val)/100)*c;

还编辑了 css，所以加载动画是顺时针的

.circle-svg {
  transform: rotate(90deg) scaleX(-1);
}

如果稍微重写它，就不需要水平翻转它 (scaleX(-1))，但您明白了。