[Vue.js] Vue 에서 UI 애니메이션 효과 주기

💡 실습 포인트!

• 이번에는 Vue 에서 제공하는 transition 을 이용한 애니메이션 효과주는 방법을 포함하여 총 2가지 애니메이션 효과를 주는 방법을 공부해보았다.
• 기본적인 방법으로 애니메이션 효과를 줄 때는 투명도만 0에서 1로 바뀌도록 애니메이션 효과를 줘보았고, transition 을 사용할 때는 모달창이 위에서 내려오고, 닫을 때에는 아래로 사라지도록 애니메이션 효과를 줘보았다.
• 나는 분명히 transition 을 이용해 애니메이션 효과를 추가한 것뿐인데, 기존에 잘 작동하던 닫기 버튼이 작동하지 않고 에러가 발생해서.. 구글링하고 에러를 수정하느라 한참 걸렸다.
• 그래서 모든 수정을 마친 후에 여기저기 눌러보면서 에러가 발생하지 않는지 확인까지 한 후에야 마음을 놓을 수 있었다.

---

💜 들어가기 전에

• UI 가 등장 혹은 퇴장할 때 애니메이션 효과를 주고 싶을 때가 있다.
• 이 때, 애니메이션 효과를 주는 데에는 다음과 같이 두 가지 방법이 있다.
  • JavaScript 에서도 자주 활용하는 방법으로, 클래스에 CSS 로 애니메이션 효과를 만든 후에 해당 class 를 애니메이션 효과가 필요한 UI 에 떼었다 붙였다 하는 방식으로 CSS 애니메이션 주는 방법
    (물론 과정은 동일하나 사용하는 방식이 약간 다르긴 하다.)
  • Vue 가 제공하는 <transition> 에 name 속성을 추가하여 해당 name 을 가지고 CSS 로 애니메이션 효과를 만들고, 애니메이션 효과가 필요한 UI 를 <transition></transition> 으로 감싸는 방법

---

💜 애니메이션 효과를 주는 기본적인 방법 사용하기

<div class="start" :class="{ end : openModal }">
    <Modal @closeModal="openModal = close($event)" :openModal="openModal" :clickedRoom="clickedRoom" :rooms="rooms"/>
</div>

• 먼저, 기존의 Modal Component 에 애니메이션 효과를 주기 위해 start 라는 class 를 가진 div 태그로 감싸주었다.
• 애니메이션 시작 전/후로 설정할 class 명은 이 때 미리 생각해주는 게 좋다.

 

.start {
	opacity: 0;	
	transition: all 1s;
}

.end {
	opacity: 1;
}

• 그리고 start 라는 태그에 css 로 시작 전 애니메이션을 디자인하고, end 라는 태그에 css 로 동작 후 class 를 디자인을 해주었다.
• 이번에는 단순히 투명도만 0에서 1로 바꾸어 모달창이 나타나게 하는 애니메이션 효과를 줘보았다.

<div class="start" :class="{ end : openModal }"></div>

• 이제 원하는 시점에 end 라는 class 를 start 라는 class 를 가진 div 태그에 추가해주면 애니메이션 효과를 낼 수 있다.
• JavaScript 에서는 삼항연산자를 이용하여 조건을 작성해주었는데, 여기서는 조건부로 class 를 부착하고 싶을 때 위와 같이 :class="{ 클래스명 : true }" 와 같은 형식으로 작성해주면 된다.
• 물론 true / false 를 직접 문자열로 입력해주어도 되고, data 보관함에 저장된 데이터 이름도 넣을 수 있다.
• 나의 경우, 모달창 UI 가 열렸을 때 애니메이션 효과가 부착되어야 하므로 모달창의 열고 닫힌 상태에 따라 true / false 값이 저장되는 openModal 데이터를 넣어주었다.

---

💜 Vue 가 제공하는 transition 으로 애니메이션 효과 주는 방법 사용하기

<transition name="fade">
	<Modal @closeModal="openModal = close($event)" :openModal="openModal" :clickedRoom="clickedRoom" :rooms="rooms"/>
</transition>

• 먼저, 애니메이션 효과를 주고 싶은 UI 를 <transition></transition> 으로 감싸준다.
• 이 때, <transition> 에 name 속성을 추가하여 css 를 만들 때 class 명처럼 사용할 이름을 하나 지어준다.

 

/* transition 을 활용한 스타일링 방법 */
.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }


.fade-enter-from {
	opacity: 0;
	transform: translateY(-100vh);
}

.fade-enter-active {
	transition: all 0.5s;
}

.fade-enter-to {
	transform: translateY(0vh);
	opacity: 1;
}

.fade-leave-from {
	transform: translateY(0vh);
	opacity: 1;
}

.fade-leave-active {
	transition: all 0.5s;
}

.fade-leave-to {
	transform: translateY(100vh);
	opacity: 0;
}

• 이제 맨 위의 transition 스타일링 방법을 참고하여 css 에서 원하는 대로 스타일링을 해주면 된다. 
• 퇴장 시에도 애니메이션 효과를 주고 싶다면 enter 대신에 leave 를 사용하면 된다.
• 이번에는 화면 상단에서 모달창이 내려왔다가, 닫기 버튼이나 검은 배경을 누르면 모달창이 화면 하단 방향으로 사라지도록 애니메이션 효과를 줘보았다.