javascript classList 막힘문제 도와주세요 ㅠㅠ

Question

순서대로 로딩 반복하는 bar를 제작하려고 태그를 작성하고 animation을 작성한 클래스를 순차적으로 부르는 걸 테스트하고 있는데요. 처음엔 1-2-3-4 순서대로 bar 애니메이션이 잘 작동하는데 그 이후로 다같이 준 classList.remove를 1번만 안되고 2,3,4만 된채로 1번에 애니메이션이 적용안돼요 다양한 방법으로 이것저것 테스트해봤는데도 다 안되서 도움을 요청합니다 ㅠㅠ태그는 이렇게 작성했어요.

CSS는 이렇게 작성했어요!.loading .bar_bg { width:200px; height:2px; background:#222; margin-left:4px; } .loading .bar_bg .bar { width:200px; height:2px; background:#eee; transform:scaleX(0); transform-origin:left top; } .bar_ani {animation:scale 2s both} @keyframes scale { 0% {transform:scaleX(0)} 100% {transform:scaleX(1)} }자바스크립트는 아래처럼 작성해서 초반에 classList를 bar0한테만 주고나머진 bar_timer함수에서 순서대로 돌렸는데 처음 1턴만 되고 2턴부터 1번만 적용이 안돼요 ㅜㅜlet bar = document.querySelectorAll('.bar')let num2 = 0let timer2 = setInterval(bar_timer, 2000) bar[0].classList.add('bar_ani') function bar_timer(){ num2++ if(num2 >= bar.length){ num2 = 0 for(let i of bar){i.classList.remove('bar_ani')} }bar[num2].classList.add('bar_ani')}

덤엔더머 · Accepted Answer

0으로 초기화 했지만 num2&#43;&#43;로 인해서 함수내에서 1로 변경 되어서 발생 한 문제입니다.num2 &#61; 0 로 다시 초기화 하는 것을 -1로 초기화 하는 게 가장 쉬운 해결책이겠네요.sad-ellis-1544dt - CodeSandbox

javascript classList 막힘문제 도와주세요 ㅠㅠ

1개의 답변

#classlist 목록