Modifique el valor @keyframe de la animación CSS en vue

A veces, necesitamos cambiar el período de tiempo de la duración de la animación en la animación y el valor de transformación en el fotograma clave a medida que el evento de clic comienza en la página o a medida que aumenta el tiempo.

Método 1 : agregue el siguiente código al método relevante

let style = document.createElement('style');
style.setAttribute('type', 'text/css');
document.head.appendChild(style);
let sheet = style.sheet;
sheet.insertRule('@keyframes shake{0%,100%{ transform: translateY(-'+ this.shakeTranslateY+'vw); }50%{ transform: translateY('+ this.shakeTranslateY+'vw); }}')

Modifique el valor que desea cambiar utilizando el método Sheet.insertRule.

Shake es el nombre de la animación que definí. En este momento, necesito aumentar el valor de shakeTranslateY a medida que el evento de clic ocurre repetidamente, para aumentar la distancia que la animación se mueve hacia arriba y hacia abajo.

Método 2 : cambie el valor que desea cambiar a través del atributo calculado

Paso 1: vincular un método en el elemento html     

<div class="rocket-img" :style="lotteryImg"></div>

2: Declarar este método en el atributo calculado

lotteryImg(){
  const style = {};
  style.animationDuration = this.animationImgDuration + "ms";
  return style;
},

3: Cambie el valor de this.animationImgDuration en la ubicación de procesamiento lógico que necesite

if( this.animationImgDuration > 100){this.animationImgDuration -= 40}

Optimización: Es posible que la animación que realiza en este momento no sea coherente y parezca atascada.

let cloudTimer = setInterval(() => {
  this.animationCloudDuration -= 5 * this.speedNum
  if(this.animationCloudDuration < 30){
    this.animationCloudDuration += 5 * this.speedNum
    this.animationCloudDuration = 30
    clearInterval(cloudTimer)
  }
}, 16)

Puede configurar un temporizador, el principio general es simular la frecuencia de actualización de la pantalla.

También puedes utilizar requestAnimation directamente. Haga clic para saltar al tutorial. (Otros lo escribieron, no sé cómo hacerlo)