vue3 Transition 을 이용한 아코디언 기능(부드럽게 열고 닫기)

오늘은 vue3에서 아코디언 만들기 일단은 마지막 시간으로 vue의 내장 컴포넌트인 <transition>을 사용해서 아코디언 기능을 만들어보도록 하겠습니다.

특징1

<Transition>이라는 내장 컴포너트를 사용하게 될 경우 Transition 컴포넌트에 기본적으로 내장된 훅을 이할 수 있어요

 

트렌지션이 적용된 소스를 먼저 보도록 하겠습니다.

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @before-leave="beforeLeave"
  @leave="leave"
>
  <div 
    class="cont"
    v-if="item.isOpen" 
  >
    <div v-html="item.content"></div>
  </div>
</transition>

 

위 코드에서 보면 트렌지션 컴포넌트에 @before-enter, @enter, @before-leave, @leave 이벤트 호출이 있는데요 이것이 바로 트렌지션의 내장 훅입니다.

 

이것들은 아래와 같은 이벤트를 인식합니다.

• @before-enter : 요소가 DOM에 들어가기 직전에 실행됨
• @enter : 트랜지션이 시작될 때 실행됨
• @before-leave : DOM에서 나가기 전에 실행됨
• @leave : 나갈 때 트랜지션 실행 시작

이러한 기본 훅이 제공되기 때문에 이벤트를 적용하기가 매우 편리합니다. 그럼 다음은 위 내장 훅과 함께 거의 셋팅이라고 할 수 있는 함수를 보도록 하겠습니다.

  // 트랜지션 함수
  function beforeEnter(el) {	// DIV cont가 랜더링 되면 높이를 0으로 준비
    el.style.height = '0'
  }
  function enter(el) {	// 트렌지션이 시작됨 높이가 컨텐츠 높이만큼 커짐(트렌지션이라 부드럽게 열림)
    el.style.height = el.scrollHeight + 'px'
  }
  function beforeLeave(el) {	// 열리는 것과 반대로 닫히기 직전에 높이값을 컨텐츠 높이만큼 지정함
    el.style.height = el.scrollHeight + 'px'
  }
  function leave(el) {	// 돔에서 나가기 전에 높이를 0으로 줘서 부드럽게 닫아줌
    el.style.height = '0'
  }

 

위와 같이 @before-enter="beforeEnter" 트랜지션 내의 요소(class="cont" DIV)가 화면에 랜더링 되면 beforEnter함수를 호출해서 동작을 실행시켜주는 것입니다. 위에 코드에 주석으로 간단히 설명을 붙여놓았는데요 beforeEnter와 같은 함수명은 편한대로 이름일 지어도 됩니다.

특징2

또한 beforeEnter(el) 함수 호출 시 요소 element 요소를 기본으로 넘겨주기 때문에 함수 부분에서 beforeEnter(el) 이렇게 돔을 받아서 컨트롤 할 수 있습니다. 아주 좋아요!

 

그렇기 때문에 함수를 호출할 때 자신의 요소를 따로 넘기지 않아도 됩니다.

 

css의 경우는 앞시간에서 작서한 것과 동일한데요 앞 두 시간에 배웠던 내용보다 트랜지션 내장 컴포넌트를 활용해서 작업하는 것이 훨씬 간편한 부분이라 추가적인 설명이 필요없을 정도입니다.

 

그럼 완성된 코드를 보겠습니다.

 

제일 간단하게 기능을 구현할 수 있는 방법이지만 앞 두 시간에 배웠던 것들도 학습을 해두는 것이 더 다양한 기능을 작업할 능력을 기를 수 있을 것입니다. 

 

그럼 뷰에서 아코디언 기능 작업하는 방법은 이쯤에서 마무리하도록 하겠습니다.

 

감사합니다.😊