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">

2. 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);		// 원래 자리로 돌아옴
  }