[Vue] #11 - UI 애니메이션

1. :class=""

CSS로 애니메이션주기 - 모달창이 서서히 열리는 애니메이션

<div class="start" :class="{ end : 모달창열렸니 }"> <style> .start{ opacity: 0; transition: all 1s; } .end{ opacity: 1; } </style>

'모달창열렸니'가 true가 될 때만 end클래스가 적용이 된다는 뜻

transition: all 1s 는 클래스의 모든요소의 변화가 생길 때 1초가 걸린다는 뜻

2. - Vue제공 태그 사용

<transition> 애니메이션 주고싶은 요소를 감싼다 </transition>

3. 창 열릴 때

enter-from, enter-active, enter-to : < transition > 에 class 작성

1. name지정

<transition name="fade">

1. css에 3개의 클래스 선언

.fade-enter-from{ opacity: 0; // 시작 시 스타일 } .fade-enter-active{ transition: all 1s; // 동작할 애니메이션 } .fade-enter-to{ opacity: 1; // 끝날 시 스타일 }

4. 창 닫힐 때

leave-from, leave-active, leave-to

• .fade-leave-from{ opacity: 1; // 사라지기 시작할 때 } .fade-leave-active{ transition: all 1s; } .fade-leave-to{ opacity: 0; // 사라지기 끝날 때 }

• .fade-enter-from{ /* opacity: 0; */ transform: translateY(-1000px); // 위에서 부터 1000픽셀 내려옴 } /* */ .fade-enter-active{ transition: all 1s; } /* 끝날 시 스타일 */ .fade-enter-to{ /* opacity: 1; */ transform: translateY(0px); // 원래 자리로 돌아옴 }