📌 애니메이션 효과 주기
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;
}
'Vue3 > 코딩애플 part1' 카테고리의 다른 글
[Vue/코딩애플/part1] 13. vue의 라이프사이클 (0) | 2024.07.30 |
---|---|
[Vue/코딩애플/part1] 12. 상품 정렬 기능 / 데이터 원본 보존 (0) | 2024.07.30 |
[Vue/코딩애플/part1] 10. input (v-model), watcher (0) | 2024.07.29 |
[Vue/코딩애플/part1] 9. custom event (자식이 부모 데이터 바꿀 때) (0) | 2024.07.29 |
[Vue/코딩애플/part1] 8. props (0) | 2024.07.29 |