Modifique o valor @keyframe da animação CSS em vue

Às vezes, precisamos alterar o período de duração da animação na animação e o valor da transformação no quadro-chave conforme o evento de clique começa na página ou conforme o tempo aumenta.

Método 1 : adicione o seguinte código ao 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 o valor que deseja alterar usando o método sheet.insertRule.

Shake é o nome da animação que defini, neste momento preciso aumentar o valor de shakeTranslateY conforme o evento click ocorre repetidamente, de modo a aumentar a distância que a animação se move para cima e para baixo.

Método 2 : Altere o valor que deseja alterar por meio do atributo calculado

Etapa 1: vincular um método ao elemento html     

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

2: Declare este método no atributo calculado

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

3: Altere o valor de this.animationImgDuration no local de processamento lógico necessário

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

Otimização: você pode descobrir que a animação que você faz neste momento não é coerente e parece travada.

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

Você pode definir um cronômetro, o princípio geral é simular a frequência de atualização da tela.

Você também pode usar requestAnimation diretamente. Clique para ir para o tutorial. (Outros escreveram, não sei como fazer)