vueのCSSアニメーションの@keyframe値を変更する

場合によっては、ページ上でクリック イベントが開始するか時間が増加するにつれて、アニメーションのアニメーション期間とキーフレームの変換の値を変更する必要があります。

方法 1 : 次のコードを関連するメソッドに追加します。

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); }}')

Sheet.insertRule メソッドを使用して、変更する値を変更します。

Shake は私が定義したアニメーションの名前ですが、このとき、クリック イベントが繰り返し発生するにつれて、アニメーションが上下に移動する距離を増やすために、shakeTranslateY の値を増やす必要があります。

方法 2 : 計算された属性を通じて変更したい値を変更する

ステップ 1: HTML 要素にメソッドをバインドする     

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

2: このメソッドを計算された属性で宣言します

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

3: 必要な論理処理位置で this.animationImgDuration の値を変更します。

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

最適化: この時点で作成するアニメーションが一貫性がなく、行き詰まっているように見える場合があります。

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

タイマーを設定できます。一般原則は、画面の更新頻度をシミュレートすることです。

requestAnimation を直接使用することもできます。クリックするとチュートリアルにジャンプします。(他の人が書いていますが、やり方がわかりません)