[Vue] 부드럽게 창을 띄워주는 방법

v-if 요소로 상황에 따라 애니메이션을 주는 모달창에 자주 쓰는 속성

1. 조건부 속성 부여 방법

모달창을 열도록 눌렀을 때, 1초동안 서서히 밝기가 변하며 뜸

 <!--조건부로 class 명을 넣음-->
    <div class="start" :class="{end: 모달열렸니}">


<style>
	.start{
   		opacity :0; /*투명도 */
   		transition: all 1s; /*모든 속성이 변할 때 ,1초에 걸쳐서 변경해주세요 */

	}
	.end{
  		opacity: 1;
	}
</style>

2. transition

1.애니메이션을 주고자 하는 태그에 transition 태그로 감쌈

 <!--조건부로 class 명을 넣음-->
    <transition name="fade">
      <!-- 모달창 -->
      <Modal @closeModal="모달열렸니 = false" :selected="selected" :products="products" :모달열렸니="모달열렸니" />
    </transition>

2. style태그 안에 name에 맞추어 3개의 함수를 작성

등장에니메이션 (밝기 변화)

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

등장에니메이션 (위에서 날아오기)

.fade-enter-from {transform: translateY(-1000px);} /*시작시 스타일 */
.fade-enter-active {transition: all 1s;} /* 시작시 스타일 */
.fade-enter-to {transform: translateY(0);} /*끝날때 스타일 */

퇴장에니메이션 (밝기 변화)

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