关于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度。
失常状况下，这个动画是暂停的，一旦更新数据，启动动画。
能够完满的解决一个比拟麻烦的需要。