如何让更新状态的动画更丝滑？

前言

如果有一个列表，列表有一个功能按钮，叫做更新。
这个按钮需要一个状态，用来表示数据正在更新。
一般情况下，用一个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度。
正常情况下，这个动画是暂停的，一旦更新数据，启动动画。
可以完美的解决一个比较麻烦的需求。