css 애니메이션 재시작

버튼을 눌렀을 때 특정 클래스의 효과를 제거했다가 다시 추가할 때 사용하는 방법입니다.

저는 위 스크립트에서 마우스를 해당 컨테이너에 가져다댔을 경우 pause 클래스를 붙여줬다가, 마우스를 떼면 다시 on 클래스를 붙여주는 식으로 작업을 했습니다.

원래 on 클래스로 동작이 되는 중간에, 마우스를 가져다댔을 때 pause, 다시 마우스를 떼면 다시 on으로 동작을 해야하는데,

이미 같은 클래스가 있어서 진행바가 처음부터 다시 시작되지 않아서 아래 방법으로 사용했습니다.

참조 사이트에서는 자바스크립트로 했는데 저는 제이쿼리로 작업했습니다.

function process(){
  // console.log('프로세스');
  // var process = $('.process');
  const target = $('.process');


  target.removeClass("on").removeClass('pause'),
  // void target.offsetWidth,
    void target.outerWidth(),
  target.addClass("on");
  
}

//  process
.process-bar{
  width:100px;
  height: 1px;
  background:#aaa;
  .process{
    width:1%;
    height:1px;
    background:blue;
    transition:all 3s;
    &.on{      
      // width:100%;
      animation: progress ease 3s;
    animation-iteration-count: infinite;
    }
    &.pause{
      animation-play-state:paused;
    }
    &.restart{      
      // width:100%;
      animation: progress ease-out 3s;
    animation-iteration-count: infinite;
    }
  }
}

원래 해당 태그에 .process.on 그리고 .process.pause 로 동작합니다.

이렇게 특정 클래스에 애니메이션을 넣고, 제이쿼리(자바스크립트)로 애니메이션이 멈췄다가, 다시 애니메이션이 처음부터 실행되도록 하고자 할 때 사용하는 방법입니다.

단순히 클래스를 제거하고 추가하는 건 애니메이션이 연속되는 동작이라 재시작이 안됩니다.

setTimeout을 사용해서 딜레이를 줄 수도 있지만 바람직한 방법은 아닙니다.

function process(){
  const target = $('.process');
  target.removeClass("on").removeClass('pause'),
  void target.outerWidth(),
  target.addClass("on");
  
}

클래스를 빼고 더하는 가운데, 다른 동작을 하나 추가해주면 됩니다. 

출처 : marshall-ku.tistory.com/310

작성자분께 감사합니다. -_-)/

자바스크립트로는 아래와 같이 하면 됩니다.

function resetAnimation() {
  const target = YOURELEMENT;
  target.classList.remove("effect"),
  void target.offsetWidth,
  target.classList.add("effect")
}