enter,leave & list transition

gay0ung·2021년 1월 21일
0

Vue.js

목록 보기
1/1

단일 엘리먼트/ 컴포넌트 트랜지션

vue 는 <transition> 컴포넌트를 제공하므로 다음과 같은 상황에서 모든 엘리먼트 또는 컴포넌트에 대한 enter/leave transition을 추가 할수 있다.

  • 조건부 렌더링(v-if)
  • 조건부 출력(v-show)
  • 동적 컴포넌트
  • 컴포넌트 root node

🖥 코드보기

  1. vue 는 대상 엘리먼트에 css트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css트랜지션 클래스가 적절한 타이밍에 추가/ 제거 된다.
  2. 트랜지션 컴포넌트가 javascript 훅을 제공 하면 이러한 훅은 적절한 타이밍에 호출된다.

transition class

enter

  1. v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거

  2. v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용. 트랜지션 / 애니메이션이 완료되면 제거됩니다.

  3. v-enter-to: 진입 상태의 끝에서 실행. 엘리먼트가 삽입된 후 (동시에 v-enter가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가.

leave

  1. v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거.

  2. v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거.

  3. v-leave-to: 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

여기서 v-<transition>에 name을 따로 지정해 주지 않았을 경우 사용 하는 것이다. 만약 <transition name="fade"> 이면 fade-enter이런식으로 사용해주면 된다.

css transition

🖥 코드보기

css animation

transiton과 다른 점은 enter된 직후에 v-enter가 제거 되지 않지만 animationend 이벤트에 있다

🖥 코드보기

사용자 지정 transition class

사용자 정의 트랜지션 클래스를 지정할 수도 있다.

  • enter-class
  • enter-active-class
  • enter-to-class
  • leave-class
  • leave-active-class
  • leave-to-class

transition 지속시간

<transition :duration="1000">...</transition>

enter/ leave 기간에도 명시적인 값을 지정할 수 있다.

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript hook

속성에서 JavaScript hook을 정의 할수 있다.

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
methods: {
// enter
  beforeEnter: function (el) {},
    
  // done 콜백은 CSS와 함께 사용할 때 선택 사항입니다.
  enter: function (el, done) {
    // ...
    done()
  },
    
  afterEnter: function (el) {},
    
  enterCancelled: function (el) {},

//leave
  beforeLeave: function (el) {},
    
  // done 콜백은 CSS와 함께 사용할 때 선택 사항입니다.
  leave: function (el, done) {
    // ...
    done()
  },
    
  afterLeave: function (el) {},
    
  // leaveCancelled은 v-show와 함께 사용됩니다.
  leaveCancelled: function (el) {}
}

이러한 훅은 css transition/animation 또는 자체적으로 사용할수 있다.

JavaScript 전용 트랜지션을 하는 경우 enterleave 훅에서 done 콜백이 필요. 그렇지 않으면 동기적으로 호출되고 트랜지션 즉시 완료된다.

최초 렌더링시 트랜지션

노드 초기 렌더에 transition을 적용하고 싶다면 appear 키워드 속성을 추가 할수 있다.

<transition appear>...</transition>

기본적으로 enter/leave에 지정된 transition을 사용한다. 그러나 원하는 경우 사용자 정의 css클래스를 지정할 수도 있다.

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

사용자 정의 JavaScript 훅

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

엘리먼트 간 트랜지션

v-if/v-else 를 사용하여 원본 엘리먼트 사이를 transition 할수 있다. 가장 일반적인 두 엘리먼트 transiton중 하나는 목록 컨테이너와 빈 목록을 설명하는 메시지 사이에서 작용한다.

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

하지만 태그이름이 같을때 key속성을 부여해줘야 한다.

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

key속성 대신 다음과 같이 작성할수도 있다.

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

transition mode

  • in-out : 새로운 엘리먼트가 transition되고 완료되면 현재 엘리먼트가 transition된다.

  • out-in : 현재 엘리먼트가 먼저 transition되고, 완료되면 새로운 요소가 바뀐다.

컴포넌트간 트랜지션

동적컴포넌트를 래핑하면된다.

<transition name="component-fade" mode="out-in">
  <component :is="view"></component>
</transition>
data(){
  return{
    view:'v-a'
  }
},
components:{
  'v-a':{
    template: '<div>Component A</div>'
  },
  'v-b':{
    template: '<div>Component B</div>'
  }
}
.component-fade-enter-active, 
.component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, 
.component-fade-leave-to {
  opacity: 0;
}

리스트 트랜지션

v-for을 사용하여 동시에 렌더링 하고자 하는 항목의 전체목록이 있는 경우에는 <transition-group> 컴포넌트를 사용한다.

리스트의 enter/leave

<transition> 과 달리, 실제 요소인<span>을 렌더링합니다. tag 속성으로 렌더링 된 요소를 변경할 수 있다.

<div id="list-demo">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

출처

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

profile
나도 주니어 개발자!

0개의 댓글