Vue.js Transition 개요

Vue.js의 Transition 기능을 요약합니다. (초기초 학습 기록)

기본 사용법

1. transition 태그로 둘러싸기

트랜지션을 적용하고 싶은 범위를 transition 태그로 둘러싸, 컴퍼넌트를 작성.

이 컴퍼넌트내 요소에, 애니메이션 등의 움직임을 CSS로 기술해 가기 위한 클래스를 자동적으로 부여.

  <transition>
      <p v-if="show">Transition Test</p>
  </transition>

2. v-show/v-if 지시어 적용

CSS에 의해 움직임을 제어하고 싶은 요소에는 v-show 또는 v-if 지시어로 표시·비표시하는 거동을 구현.

지시어의 기능에 의해, 클래스의 전환 기능을 할당.

3. 클래스(CSS) 설명

부여 된 클래스는 다음 두 가지 상태로 크게 나뉩니다.

Enter

Leave

위의 상태는 v-show 및 v-if 에 의해 전환되도록 처리됩니다.

아래의 예에서는, 버튼을 클릭하면 아래 그림의 흐름으로 클래스를 적용.

.v-enter 때로는, 문자 Test 는 투명 상태( opacity:0 )가 되어 있다.

Transition 버튼을 클릭하면 .v-enter-active 처리가 실행된다. .v-enter-to 상태가 되고 문자 Test 가 표시된다.

Transition 버튼을 다시 클릭하면 .v-leave-active 처리가 실행되어 .v-leave-to 상태로 천이한다.

<template>
  <div id="app">
    <button v-on:click="show = !show">
        Transition
    </button>
    <transition>
        <p v-if="show">Test</p>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'test',
  data :function (){
    return {
      show: false
    }
  }
}
</script>
<style scoped>  
.v-enter-active, .v-leave-active {
  transition: opacity .5s;
}
.v-enter, .v-leave-to{
  opacity: 0;
}
</style>

Transition 식별

여러 transition을 사용할 때 name 속성을 추가하고 식별합니다. 다음의 예에서는, test1 를 접두사로 한 클래스가 생성된다.
.test1-enter-active 와 같이 기술해 디폴트의 .v-enter-active 와는 다른 컴퍼넌트로 식별 가능.

<template>
  <div id="app">
    <button v-on:click="show = !show">
        Transition
    </button>
    <transition name="test1">
        <p v-if="show">Test1</p>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'test1',
  data :function (){
    return {
      show: false
    }
  }
}
</script>
<style scoped>  
.test1-enter-active, .test1-leave-active {
  transition: opacity 1s;
}
.test1-enter, .test1-leave-to{
  opacity: 0;
}
</style>

초기 묘화시의 Transition

노드의 초기 묘화시에 트랜지션을 적용하고 싶은 경우, appear 속성을 추가한다.
appear 속성이 지정된 transition 태그는, 페이지가 열렸을 때에, 요소가 추가된다.

<transition appear>
  <!-- ... -->
</transition>

참고

트랜지션

Enter/Leave 및 전환 목록

Vue.js의 transition으로 애니메이션의 기초를 배웁니다.

Vue.js의 transition 란 무엇입니까?