前言

如果有一个列表，列表有一个性能按钮，叫做更新。
这个按钮须要一个状态，用来示意数据正在更新。
个别状况下，用一个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度。
失常状况下，这个动画是暂停的，一旦更新数据，启动动画。
能够完满的解决一个比拟麻烦的需要。