关于css:如何让更新状态的动画更丝滑

前言

如果有一个列表，列表有一个性能按钮，叫做更新。
这个按钮须要一个状态，用来示意数据正在更新。
个别状况下，用一个 loading 就能够。
然而如果丧心病狂的 UI 给了一个这样的 icon：
咱们该怎么解决？

解决办法

• 只有更新数据，就让这个 icon 转动一圈
• 只有更新数据，就让 icon 始终转动，拿到数据之后进行，回到原位

办法一最简略，然而体验不好。
因为获取数据的工夫不固定，有可能长有可能短。

办法二体验很好，然而为了能丝滑的回到原位，咱们须要做更多的解决。
如果用用户频繁更新，解决起来很麻烦。
为了做好这里，可能会耗几个小时，小半天的工作量。

有没有更好的解决办法呢？

最佳形式

这是一段 scss 代码：

.refresh-icon {
  animation: runTime linear 2s infinite;
  animation-play-state: paused;
  &.updating {animation-play-state: running;}
}
@keyframes runTime {
  0% {transform: rotate(0deg);
  }
  100% {transform: rotate(360deg);
  }
}

定义一个线性动画，有限循环旋转，每一次 2 秒，从 0 度到 360 度。
失常状况下，这个动画是暂停的，一旦更新数据，启动动画。
能够完满的解决一个比拟麻烦的需要。