카테고리 버튼을 클릭 할 때 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(()=>{
//실행 시키고 싶은 코드
},**내가 원하는 시간**)
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의 비동기 처리에 대해 좀 더 공부해 봐야겠다.
앞으로 아주 많이 사용할 것 같은 너낌~