Vue js 트랜지션 알아보기(단일 엘리먼트/컴포넌트)

이글은 vuejs 진입/진출 그리고 트랜지션 글을 나중에 제가 보려고 작성한 글이기 때문에 정보가 부족할 수도 있고 잘못 이해한 부분이 있을 수 있습니다. :)

또한 이 글에는 단일 엘리먼트/컴포넌트에 대한 정보만 작성되어있습니다. 다른 부분이 필요하신 분은 공식 문서 및 다른글을 참고바랍니다. 감사합니다

kr.vuejs.org/v2/guide/transitions.html

진입/진출 그리고 리스트 트랜지션 — Vue.js

 

 

Vue에서 DOM에 삽입, 갱신 또는 제거될 때 트랜지션 효과를 어떻게 지원하는지에 대해 알아보았다.

기존 HTML과 같은 JAVASCRIPT나 JQUERY에서와 달리 vue에서 지원하는데 지원하는 조건은 다음과 같다

 

작동조건

• 조건부 렌더링 (v-if 사용)
• 조건부 출력 (v-show 사용)
• 동적 컴포넌트
• 컴포넌트 루트 노드

예제

간단한 예제를 보면 transition안에 v-if로 조건부 렌더링된 엘리먼트가 들어있는 것을 볼 수있다.

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

 

이처럼 transition 컴포넌트로 싸여진 엘리먼트만 삽입/제거/갱신 될때 작동하는 걸 볼 수있다.

 

작동과정

 

작동하는 과정은 다음과 같습니다.

 

1. vue 에서 대상 엘리먼트에 css 트랜지션 또는 애니메이션이 적용되었는지에 대한 여부를 감지,  있을 경우 css 트랜지션 클래스가 적절한 타이밍에 추가/제거 된다. (클래스는 내가 넣지않아도 자동으로 들어간다.)
2. 만약 javascript 훅이 있는 엘리먼트의 경우 훅 또한 적절한 타이밍에 들어간다.
3. css트랜지션이나 훅이 없을 경우 삽입 또는 제거를 위한 dom 작업이 실행된다.

 

트랜지션 클래스

 

앞의 작동과정에서 클래스가 자동으로 붙는다고 했는데 클래스에도 진입/진출에 따라 네가지로 분류되어 적용된다.

적용되는 클래스는 다음과 같다.

 

여기서 enter는 진입할때를 얘기하고 leave는 진출 할때를 의미하는데 이부분을 기억하고 보면 좋아요 :)

 

• v-enter : enter의 시작상태. 엘리먼트가 삽입되기전에 적용되고 한 프레임 후에 제거된다. 
• v-enter-active: enter에 대한 활성 및 종료상태 엘리먼트가 삽입되기전에 적용되며 트랜지션/애니메이션이 완료되면 제거됨
• v-enter-to: 진입 상태의 끝에서 실행됩니다. 
• v-leave: leafve를 위한 시작상태
• v-leave-active: leafve에 대한 활성 및 종료상태
• v-leave-to: 진출 상태의 끝에서 실행된다.

 

클래스는 name에 붙어서 나오는데 예를들어 transition name="my-transition"일경우 v-enter에 대한 클래스는 my-transition-enter가 되는 방식이다.

 

간단한 클래스에 대한 style예제를 보자

 

예제

/* 애니메이션 진입 및 진출은 다른 지속 시간 및  */
/* 타이밍 기능을 사용할 수 있습니다. */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

난 여기서 이해하는데 시간이 좀 걸렸는데 

정리하면 다음과 같다

 

글자가 작아서 잘 안보이는데 어짜피 참고용이니까....

 

enter-active와 leave-active는 enter와 leave의 속성을 나타낸다. 

vue document에 enter와 leave에 대한 설명을 그림으로 그려놓았다. 이부분과 코드를 같이 보면 이해가 더 잘될거같다

transition뿐만 아니라 animation도 넣을 수 있는데 애니메이션을 굳이 써야되는 차이점을 아직 못느끼기에 그냥 넘어간다.