React

애니메이션

CSS

외부 라이브러리를 사용하지 않고도 기본 CSS 와 JS 기능만 활용해서 어느정도 애니메이션을 넣을 수 있다.
먼저 동적으로 className 을 주는 방법부터 보자

 <div
          className={`challenge-item-details ${isExpanded ? "expanded" : ""}`}
        >

이렇게 해주면 isExpanded 의 불린 값에 의존해 expaded 라는 className 을 붙이거나 뗄 수 있다.

그럼 이제 이걸 가지고 transition 을 써보자

.challenge-item-details-icon {
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.25rem;
  transition: transform 0.3s ease-out;
}

.challenge-item-details.expanded .challenge-item-details-icon {
  transform: rotate(180deg);
}

위가 간단한 예시. 먼저 expanded 상태일때 transform 으로 rotate 값을 준다.
이것만으로도 rotate 하게 만들수는 있지만 전혀 부드럽지 않게 한번에 휙휙 바뀐다. 그래서 필요한 것이 transition. transition 은 animate 할 대상에다가 넣어 주면 되는데, transform 이랑 같이 넣어주는게 아니고 그냥 기본 상태인 경우에 넣어주는 것. 그래서 위 예시에서 .challenge-item-details-icon 여기다가 넣은 것이다. 이제 첫번째 값으로 transition의 적용 대상을 명시한다. 이 경우에는 transform 에 대한 transition 을 넣는 것이기 때문에 transform 이라고 했지만 그냥 all 이라고 넣어도 무방하다. 그다음 0.3s 는 transition의 지속시간, ease-out 은 표현 방법인데 ease-in 도 있고 ease-in-out 도 있으며 원하는걸 선택하면 된다.

그 다음에 알아볼 것은 animation. transition 과 다른 것이다. 가령 모달창이 뜨는 상황을 생각해보자. 모달창은 활성화 되기 전까지는 존재하지 않기 때문에 transition을 넣을 수가 없다. transform:rotate(180deg) 같은걸 넣을 수가 없다는 소리이다. 기준점이 존재해야 그걸 180도 돌릴텐데 기준점이 없는 상황이기 때문이다. 때문에 모달창 같은 것에는 animation을 사용해야 한다.

.modal {
  top: 10%;
  border-radius: 6px;
  padding: 1.5rem;
  width: 30rem;
  max-width: 90%;
  z-index: 10;
  animation: slide-up-fade-in 0.3s ease-out forwards;
}

@keyframes slide-up-fade-in {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

이게 모달창에 animation을 넣은 예시
@keyframes 라는 키워드를 이용해서 애니메이션의 이름을 정해주고 내용도 정한다. 0%는 시작점을 의미하고 100%는 끝나는 시점을 의미.
translateY(30px) 을 사용했으니 30px정도 아래에서 위로 스윽 올라오는 애니메이션을 구현한 것이다.
그 다음에 모달에 animation: slide-up-fade-in 0.3s ease-out forwards; 다음과 같이 넣어준다. 직접 규정한 이름을 넣고, 지속 시간을 넣고, 표시방식을 넣는다. transition에서 다루지 않은 것이 forwards 인데 forwards 를 넣게 되면 애니메이션이 끝난 마지막 상태에서 다시 스타트 상태로 돌아오지 않고 마지막 지점에서 멈추게 된다.
이렇게 trasition 과 animation 만 사용해도 어지간한건 다 할 수 있지만 ‘사라지는’ 애니메이션을 넣거나 좀더 복잡한 애니메이션을 넣기 위해서는 프레이머 모션 같은 라이브러리를 써야 한다.