vue 图标简单抖动晃动效果

<div class="fixed-box" >
      <img class="rotate" :class="[{'r1': shrinkPacket}, {'r2': !shrinkPacket}]" src="../../../assets/images/consume_packet.png"/>
    </div>

.fixed-box {
  position: fixed;
  left: 5px;
  bottom: 6rem;
  width: 2rem;
  height: 2.5rem;
  img {
    width: 2rem;
    height: 2.5rem;
  }
  .r1 {
    transform:rotate(-5deg);
  }
  .r2 {
    transform:rotate(3deg);
  }
}

startRotate() {
      clearInterval(this.timer);
      this.timer = setInterval(()=>{
        this.shrinkPacket = !this.shrinkPacket
      },150);
    },

 

参考https://www.jq22.com/webqd6706