[VUE] 아코디언 만들기

 

아코디언 만들기전에 vue transition에 대해서 알아보자.

 

 

• transition 컴포넌트로 싸여진 엘리먼트가 삽입되거나 제거 될 때 일어난다.
• vue는 대상 엘리먼트에 css 트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css 트랜지션 클래스가 적정한 타이밍에 추가 / 제거된다.
• 트랜지션 컴포넌트가 JavaScript 훅을 제공하면 이러한 훅은 적절한 타이밍에 호출된다.
• css 트랜지션 / 애니메이션이 감지되지 않고 JavaScript 훅이 제공 되지 않으면 삽입 또는 제거를 위한 DOM 작업이 다음 프레임에서 즉시 실행된다.

 

 

# 진입 / 진출 트랜지션에는 네가지 클래스가 적용된다.

 

enter / enter-to / leave / leave-to    ( class )

   0         1            1          0          ( opacity )

 

 

1. v-enter : enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거된다.
2. v-enter-active : enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용된다. 트랜지션 / 애니메이션이 완료되면 제거된다.
3. v-enter-to : 진입 상태의 끝에서 실행된다. 엘리먼트가 삽입된 후(동시에 v-enter가 제거됨), 트랜지션 / 애니메이션이 끝나면 제거된다.
4. v-leave : leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거된다.
5. v-leave-active : leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거된다.
6. v-leave-to : 진출 상태의 끝에서 실행된다. 진출 트랜지션이 트리거되고(동시에 v-leave가 제거됨), 트랜지션 / 애니메이션이 끝나면 제거된다.

 

 

 

 

# JavsScript 훅

<transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"

    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
>
  	<!-- ... -->
</transition>

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

 

 

// ...
methods: {
    // --------
    // 진입
    // --------

    beforeEnter: function (el) {
      	// ...
    },
    // done 콜백은 CSS와 함께 사용할 때 선택 사항입니다.
    enter: function (el, done) {
        // ...
        done()
    },
    afterEnter: function (el) {
      	// ...
    },
    enterCancelled: function (el) {
      	// ...
    },

    // --------
    // 진출
    // --------

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

 

• JavaScript 전용 트랜지션을 하는 경우 `enter` 및 `leave` 훅에서 `done` 콜백이 필요하다. 그렇지 않으면 동기적으로 호출되고 트랜지션 즉시 완료된다.
• vue가 css 탐지를 건너 뛸 수 있도록 JavaScript 전용 트랜지션에 `:css="false"`를 명시적으로 추가하는것도 좋다. css 규칙이 실수로 트랜지션을 방해하는 것을 방지한다.

 

 

 

---

 

# template

<transition
    name="expand"
    @enter="enter"
    @after-enter="leave"
    @before-leave="enter"
    @after-leave="leave"
>
    <ul
        v-if="active"
        class="snb"
    >
        <li>
         	{{ name }}
        </li>
    </ul>
</transition>

여기에는 자세히 적여있지 않지만, 버튼을 클릭하면 active가 true가 되면서 transition이 작동한다.

 

+) JavaScript 훅

 

 

 

#script

enter(el: HTMLElement) {
	el.style.height = el.scrollHeight + 'px';
}

leave(el: HTMLElement) {
	el.style.height = '';
}

진입시 Element의 높이를 구하고 진출시 높이를 0으로 상쇄시키는 스크립트이다.

 

 

#css (tailwind.css)

.expand-enter-active,
.expand-leave-active {
    @apply overflow-hidden transition-all duration-300;
}

.expand-enter,
.expand-leave-to {
    @apply h-0 opacity-0 #{! important};
}

집입과 진출을 할 때 트랜지션을 주고, 처음 진입 시점과 진출 마지막 시점에 높이 0을 줬다.

 

 

 

 

---

 

 

 

 

 

 

---

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

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