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을 직접 사용할 수도 있습니다. 튜토리얼로 이동하려면 클릭하세요. (다른 사람들이 썼는데 어떻게 해야할지 모르겠어요)

vue에서 CSS 애니메이션의 @keyframe 값 수정

추천