页面小彩蛋—动态抖动

<template>
     <div class="shake">
          <div class="shake-box">
              <img  class="shake-box-img" 
              :class="[{'shake-box-img-left': shrinkPacket}, {'shake-box-img-right': !shrinkPacket}]" 
              src="images/tiktokSearch/01.png"/> 页面要抖动的图
           </div>
     </div>
</div>

js

export default {
	data() {
    	return {
        	shrinkPacket: true,
    	};
 	}
  	created() {
      	this.startRotate();
    },
    methods:{
        startRotate() {
            clearInterval(this.timer);
            var timesAdd = 0;  // 晃动次数
            var timesSub = 0;  // 停止次数
            this.timer = setInterval(()=>{
            timesAdd += 1;
            // 每晃动10次，停3*150毫秒
            if(timesAdd <= 10) {
                timesSub = 0;
                this.shrinkPacket = !this.shrinkPacket;
            } else {
                timesSub += 1;
            // 停3次后，将晃动次数置为0
                timesAdd = timesSub >= 3 ? 0 : 10;
            }
            },150);
        }
    }

scss

.shake {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
        
  &-box {
    width: 100%;
    // .fx();
    align-items:center;

    &-img {
      width: 3.749rem;
      display: block;
    
      &-left {
       transform:rotate(-5deg);
      }

      &-right {
        transform:rotate(3deg);
      }
    }
  }
}