[Vue] 부드러운 UI 애니메이션 효과 주기

모달창이 열릴 때 애니메이션 효과를 줘보자

기존 css로 만드는 법

<style>

.start {

  opacity: 0;

  Transition: all 1s;

}

.end {

  opacity: 1;

}

--> style을 주고

  <div class="start" :class="{ end : modalOpen }">

    <Modal @closeModal="modalOpen=false;" :원룸들="원룸들" :누름="누름" :modalOpen="modalOpen" />

  </div>

--> class명 넣어주면 끝!
     class명을 조건부로 넣으려면 { 클래스명 : 조건 } 으로 사용하면 된다.
    :class="{ end : modalOpen }"은  modalOpen이 true 면 end를 클래스명에 넣어라. 라는 의미가 된다. 

 

Vue 에서는 <transition> 을 이용하면 애니메이션을 쉽게 줄 수 있다.

  <transition name="fade">

    <Modal @closeModal="modalOpen=false;" :원룸들="원룸들" :누름="누름" :modalOpen="modalOpen" />

  </transition>

--> html에서 <transition name="작명"> 태그를 넣어준다. ( fade는 내가 작명한 것 )

<style>

.fade-enter-from {}

.fade-enter-active {}

.fade-enter-to {}

--> 스타일에서는 class명이 3개 필요하다. from은 시작 스타일, to는 끝 스타일, active는 transition을 넣어주면 된다.

.fade-enter-from {

  opacity: 0;

}

.fade-enter-active {

  transition: all 1s;

}

.fade-enter-to {

  opacity: 1;

}

--> 이렇게 하면 위 css로 만든 애니메이션과 똑같은 애니메이션이 만들어진다.

 

퇴장 애니메이션(모달창이 닫힐 때)도 간단하게 만들 수 있다.

.fade-leave-from {

  opacity: 1;

}

.fade-leave-active {

  transition: all 1s;

}

.fade-leave-to {

  opacity: 0;

}

--> 위 enter를 leave로 바꾸면 끝

 

출처 : 코딩애플