[Vue/코딩애플/part1] 11. UI 애니메이션 효과 주기 / transition

📌  애니메이션 효과 주기

CSS로 애니메이션 효과를 주려면

1. 시작전 class 명

2. 애니메이션 끝난 후 class명

3. 그리고 원할 때 2번 class명 부착

4. 시작전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다.

 

.start 

.end 

에 대한 스타일을 미리 만들어 놓고, 모달창이 열렸을 때만 .end 클래스를 부착한다.

 

<!-- 모달창 영역 -->
  <div class="start">
    <Modal @closeModal="isModal = false" :prodList="prodList" :prodId="prodId" :isModal="isModal"/>
  </div>

 

(CSS)

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

 

HTML 속성에 데이터바인딩하려면

:속성="데이터이름"

 

class 명을 조건부로 넣으려면

<div :class="{ 클래스명 : 조건 }"> </div>

=> 조건이 true 일 때 클래스명이 부착된다

 

ex)

:class=" { end: true } "

end라는 클래스명이 항상 붙는다.

 

모달창이 열렸을 때 (isModal = true) end 라는 클래스명이 부착되어야 하므로

:class="{ end : isModal }"

 

<div class="start" :class="{ end : isModal }">
    <Modal @closeModal="isModal = false" :prodList="prodList" :prodId="prodId" :isModal="isModal"/>
  </div>

 

위의 애니메이션을 Vue 에서는 <transition> 을 활용할 수 있다.

 

---

📌 Transition 활용하기

1. 애니메이션 주고 싶은 요소를 <transition name="작명"> 으로 감싸기

<trasition name="작명"></transtion>

 

fade 라고 작명했다.

<!-- 모달창 영역 -->
  <transition name="fade">
    <Modal @closeModal="isModal = false" :prodList="prodList" :prodId="prodId" :isModal="isModal"/>
  </transition>

 

2. CSS 에 class 명 3개 작성

.작명-enter-from : 시작 시 스타일

.작명-enter-active

.작명-enter-to : 끝날 시 스타일

 

.fade-enter-from { 애니메이션 동작 전 상태 }
.fade-enter-active { 애니메이션 동작 중 상태, 대부분 transition }
.fade-enter-to { 애니메이션 동작 후 상태 }

 

세부 내용은 아래와 같다

/* 시작 시 스타일 */
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: all 1s;
}
/* 끝날 시 스타일 */
.fade-enter-to {
  opacity: 1;
}

 

퇴장 애니메이션도 적용해보자.

.fade-leave-from { 시작 스타일 }
.fade-leave-active { transition }
.fade-leave-to { 끝날 때 스타일 }

 

opacity 만 반대로 바꿔주면 된다.

/* 시작 시 스타일 */
.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: all 1s;
}
/* 끝날 시 스타일 */
.fade-leave-to {
  opacity: 0;
}