[vuejs] 애니메이션(animate) transition

※ 모달창에 애니메이션을 추가

※ vue에서 제공하는 transition으로 구현

 

1. App.vue

<template>

<transition name="fade">
  <Modal :누른상품번호="누른상품번호" :products="products"
   :모달창열림="모달창열림" @모달창닫기="모달창닫기()"/>
</transition>



</template>

<style>

.fade-enter-from, .fade-leave-to {
  transform: scale(0);
}

.fade-enter-active, .fade-leave-active{
  transition: all 0.5s;
}

.fade-enter-to, .fade-leave-from{
  transform: scale(1);
}

</style>

2. 출력화면