图片hover后动画，移开后动画结束

公司要做一个hover后自动播放图片动画的功能。

初始放入一张图片或者只播放一次的动画，当hover后切换为无限循环的gif即可。

<div class="gif-block">
              <img class="once-gif" :src="getGif(index)" />
              <img class="keep-gif" :src="getGif(index + 3)" />
            </div>
getGif(index) {
      return require("@/assets/home-image/gif" + (index + 1) + ".gif");
    },

.gif-block {
          position: absolute;
          top: vh(-78px);
          width: vh(135px);
          height: vh(135px);
          left: 0;
          right: 0;
          margin: 0 auto;
          &:hover {
            .once-gif {
              display: none;
            }
            .keep-gif {
              display: block;
            }
          }
          img {
            width: vh(135px);
            height: vh(135px);
          }
          .keep-gif {
            display: none;
          }
        }