카테고리 버튼을 클릭 할 때 css 효과를 주고싶은데...

JS

 category.addEventListener('click', (e) => {
  projectContainer.classList.add('animeOn');

  projectContainer.classList.remove('animeOn');
  projects.forEach((project) => {
    if (
      e.target.dataset.filter == 'All' ||
      e.target.dataset.filter == project.dataset.type
    ) {
      project.classList.remove('hide');
    } else {
      project.classList.add('hide');
    }
  });
});

클릭한 이후 클래스를 만들고 css를 입히는 것을 계획했으나, 추가한 클래스가 일정 시간 이후에 remove되지 않는다면 내가 원하는 애니메이션이 적용되지 않는 다는 것을 알 수 있었다.

이럴 때 사용할 수 있는 내장함수!!

setTimeout

일정 시간이 지난 후(내가 원하는) 지정된 코드를 실행시키는 일종의 '타이머'

사용법은 간단하다!

setTimeout(()=>{
   //실행 시키고 싶은 코드
},**내가 원하는 시간**)

• 예를 들어 3000을 적으면 3초! 5000을 적으면 5초 뒤에 내가 실행시키고 싶은 코드가 실행되는 것이다!
• 그러므로 저 실행 시키고 싶은 코드 부분에 add 해줬던 class를 다시 remove 해주면 되겠지!

category.addEventListener('click', (e) => {
  projectContainer.classList.add('animeOn');

  setTimeout(() => {
    projectContainer.classList.remove('animeOn');
  }, 200);

  projects.forEach((project) => {
    if (
      e.target.dataset.filter == 'All' ||
      e.target.dataset.filter == project.dataset.type
    ) {
      project.classList.remove('hide');
    } else {
      project.classList.add('hide');
    }
  });
});

0.2초 뒤 animeOn class 지우기 성공!!

하지만 이렇게 할 경우, 카테고리를 클릭하면 itme들이 필터링된 이후에 애니메이션이 적용되어 버린다.

따라서, 애니메이션이 적용되면서 필터링 해주기 위해서는 setTimeout() 안에 foreach문을 넣어줘 불필요한 애니메이션이 중복 적용되는 것을 막아줄 수 있다.

기억하고 싶은 코드

category.addEventListener('click', (e) => {
  projectContainer.classList.add('animeOn');

  setTimeout(() => {
    projectContainer.classList.remove('animeOn');

    projects.forEach((project) => {
      if (
        e.target.dataset.filter == 'All' ||
        e.target.dataset.filter == project.dataset.type
      ) {
        project.classList.remove('hide');
      } else {
        project.classList.add('hide');
      }
    });
  }, 200);
});

javascript의 비동기 처리에 대해 좀 더 공부해 봐야겠다.
앞으로 아주 많이 사용할 것 같은 너낌~