Vue) 12. vue가 제공하는 <transition>으로 쉽게 애니메이션을 적용해 보자..

📍 결과 )

Vue에서는 애니메이션을 쉽게 구현 할 수 있도록 transition이라는 태그를 제공해준다.

우선 사용하지 않을 때는 어떻게 구현 하였는지 먼저 알아보도록 하겠다.

📍 조건부 class명을 활용하여, 애니메이션 구현

템플릿 코드 )

  <div class="start" :class="{ end: modalOpen }">
    <ModalWindow
      :products="products"
      :modalOpen="modalOpen"
      :clickValue="clickValue"
      @openModal="modalOpen = $event"
    />
  </div>

스타일 코드 )

.start {
  opacity: 0;
  transition: all 0.3s;
}
.end {
  opacity: 1;
}

<div>로 모달창을 감싸고, .start랑 .end라는 class명을 지어주었다. 일반적으로 css로 애니메이션을 주는 from - to 처럼 사용할 수 있는 방법이다.

:class="{end : modalOpen}" Vue에서는 class 또한 바인딩이 가능하여 동적인 모습으로 보여줄 수 있는데, 처음에는 start라는 class명을 가지다가 ModalOpen이라는 data의 값이 true를 가지게 되면 class명이 end로 바뀌게 되는 것이다.

🙋🏻‍♂️ 한마디로 true라는 값을 가지는 데이터자료형 경우에만 사용이 가능하다!

📍 <transition>을 사용한 애니메이션 구현 )

템플릿 코드 )

  <transition name="fade">
    <ModalWindow
      :products="products"
      :modalOpen="modalOpen"
      :clickValue="clickValue"
      @openModal="modalOpen = $event"
    />
  </transition>

transition 태그로 감싸주고, name을 원하는 이름으로 작명해주면 이것은 class명이 된다.

스타일 코드 )

/* 입장 애니메이션 */
/* 시작 스타일 */
.fade-enter-from {
  opacity: 0;
}
/* transition */
.fade-enter-active {
  transition: all 0.3s;
}
/* 끝 스타일 */
.fade-enter-to {
  opacity: 1;
}

/* 퇴장 애니메이션 */
/* 시작 스타일 */
.fade-leave-from {
  opacity: 1;
}
/* transition */
.fade-leave-active {
  transition: all 0.3s;
}
/* 끝 스타일 */
.fade-leave-to {
  opacity: 0;
}

🤔 .[작명한 name]-enter-from

• 시작 애니메이션의 시작 부분 스타일

🤔 .[작명한 name]-enter-active

• 시작 애니메이션의 transition 부분

🤔 .[작명한 name]-enter-to

• 시작 애니메이션의 끝 부분 스타일

🤔 .[작명한 name]-leave-from

• 퇴장 애니메이션의 시작 부분 스타일

🤔 .[작명한 name]-leave-active

• 퇴장 애니메이션의 transition 부분

🤔 .[작명한 name]-leave-to

• 퇴장 애니메이션의 끝 부분 스타일