Vue에서 매끈한 UI 애니메이션 주는 법 2개

<div class="start" :class="{end : 모달창열렸니}">
  <Modal @closeModal="모달창열렸니=false;" 
  :원룸들="원룸들" :모달창열렸니="모달창열렸니" :누른거="누른거"/>
</div>

<style>
.start{
  opacity : 0;
  transition: all 1s;
}
.end{
  opacity : 1;
}

위의 코드를 보면 :class 라는 속성이 있다 :를 이용해 v-bind 상태로 사용할 수 있는데 end 라는 클래스가 true면 동작하게 끔

사용할 수 있는 것이다.

 

vue 에서는 transition을 쉽게 사용할 수 있는 태그를 제공한다.

<transition name="fade">
  <Modal @closeModal="모달창열렸니=false;" 
  :원룸들="원룸들" :모달창열렸니="모달창열렸니" :누른거="누른거"/>
</transition>

<transition> 태그의 name 속성은 편한데로 작명하면 된다.여기에서는 fade로 작명했다.

<style>
.fade-enter-from{/*시작*/
  opacity:0;
}
.fade-enter-active{ /*transition*/
  transition : all 1s;
}
.fade-enter-to{/*끝*/
  opacity:1;
}

3개의 정해진 클래스를 css해야한다. 이건 룰이기에 어겨서는 안된다.

.작명-enter-from : 시작
.작명-enter-active : transition
.작명-enter-to : 끝

 

반대로 퇴장 할 때의 애니메이션도 쉽게 만들 수 있다.

 

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