Question

当它完成循环时似乎停止了第二次。我读到，笔划 - 破折号应该是圆周或更大，但它仍然有延迟。

List<ResultSet> result = productList.stream()
                .collect(Collectors.groupingBy(ProductBean::getName))
                .entrySet()
                .stream()
                .map(Main::mapToResultSet) // Main representing the class containing the mapToResultSet method
                .collect(Collectors.toList());

Answer 1

动画看起来很不错并且正确执行。

如果某些设备/浏览器组合笨拙，那不是因为它没有经过深思熟虑，而是因为你正在制作动画stroke-dashoffset。

我会切换到动画transform，这是资源不足的重点：

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
  transform-origin: 50% 50%;
  stroke-dashoffset: 250.92135620117188;
}

@keyframes progress-indef {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<svg width="100" height="100">
  <g>
    <circle class="progress" r="40" cx="50" cy="50" fill="none" />
  </g>
</svg>

注意：我将stroke-dashoffset更改为250.92135620117188，因为这是返回的长度（但我认为差异不会导致问题）：

console.log(document.querySelector('.progress').getTotalLength())

Answer 2

在这种情况下，我建议只使用css来实现你所需要的。使用边框和动画，您可以获得相同的结果。

css

<div class='div' onmouseover="f1(this)" onmouseout="f1(this)">

</div>

HTML

.loader {
   animation: loader-rotate 2s infinite linear;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000;
   border-top: 5px solid transparent;
   border-right: 5px solid #000;
   border-radius: 50%;
   height: 100px;
   position: relative;
   transform: translateZ(0);
   width: 100px;
}

@keyframes loader-rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

检查jsfiddle。

如何平滑css并行圈旋转动画？

2 个答案: