5. project 필터링에 transition 효과 넣기

seTtimeout

상황

이전의 챕터에서 각 버튼을 누르면 필터링이 되면서 프로젝트를 보여줄 수 있게 만들었다. 다만 이렇게 하면 너무 딱딱하다... 애니메이션 효과를 더해주자.

문제

project 의 css 를 보면 아래와 같다.

.project {
  width: 280px;
  height: 250px;
  margin: 2px;
  background-color: var(--color-light-white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project.invisible {
  display: none;
}

display: none 이 사용됐다. 이 말은 즉.. transition 을 사용할 수 없다는 말이다!!!!

편법(?) 을 사용해 문제를 해결해보자.

아마 이건 편법이 아니라 보통 이렇게 할 거 같지만, 일단 여기서 말하는 편법이란, project 를 담고있는 컨테이너에 transition 이벤트를 거는것!!! ㅋㅋㅋ 간단하고 너무 좋아진다. 자 바로 해보자

어떤 효과를 줄 것인가?

필터링 버튼을 눌렀을 때 기존에 있던 프로젝트들이 사라지면서, 새롭게 나오는(?) 그런 느낌을 줄 수 있게 만들자.

해결

.work__projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

CSS

ani-out 이라는 클래스 속성을 만들었다. 해당 클래스 속성은 아래와 같은 css 가 적용된다.

.work__projects.ani-out {
  opacity: 0;
  transform: scale(0.8) translateY(40px);
}

ani-out 이라는 클래스가 적용되면 프로젝트 컨테이너는 투명해지면서 80% 사이즈가 되고 아래로 40px 내려가게 된다.

이제 work__projects 에 트랜지션을 추가해주자.

.work__projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 1;
  transition: all 300ms ease-out;
}

예상치 못한 문제 문제

이렇게 html 의 class 를 추가하는 방법으로 하면 엄청난 문제가 있다. 한번 버튼을 누르는 순간부터 그냥 모든 프로젝트들이 invisible 되면서 보이지 않게 되는 것.

따라서 일정 시간이 지난 후에 ani-out 이라는 클래스 속성을 제거해줘야한다.

이럴 때 사용할 수 있는게 바로 setTimeout() 메서드다 이 함수를 사용하면 특정 시간후에 등록된 콜백함수를 호출할 수 있게 된다.

  setTimeout(() => {
  const targetProject = target.dataset.filter;
  projects.forEach(project => {
    if (targetProject == 'all' || project.dataset.type == targetProject) {
      project.classList.remove('invisible');
    } else {
      project.classList.add('invisible');
    }
  });
  projectContainer.classList.remove('ani-out');
  }, 300)