Transition TransitionGroup vue3.js

채팅창 중 이모티콘 창이 fadein과 fadeout이 걸려 있었는데 부자연스럽게 닫히고 열리는 이슈가 있었습니다. 이 문제점은 이모티콘창에 v-if문이 걸려 있어 해당 state가 false가 되었을 때 해당 템플릿 태그가 사라지면서 발생하는 문제점이었습니다.

<div class="chat_input_area">
    <div class="emoticon_pop">
    	<template v-if="isShowEmoticons">
        	<div id="emoticon-tab-1" class="tab-content" :class="{'current':currentEmoticonTab == 1}">
            	<ul v-if="currentEmoticonTab == 1">                
                	<li v-for="(item,index) in lastUsedEmoticons" v-on:click="selectEmoticon(item)" :key="'tab1_' + index">{{item}}</li>
                </ul>
            </div>
        </template>
    </div>
</div>

사건의 발단

template 태그 속에 emoticon-tab이 많지만 보기 편하게 하기 위해 줄였습니다. 이모티콘창 열기 버튼을 클릭하면 v-on:click="showEmoticons" 이 함수가 작동하는데 함수는 if문을 사용해 isShowEmoticons가 true일 때 false로 변경하고 emoticon_pop을 fadeOut한다. 아닐경우 isShowEmoticons를 true로 변경하고 fadeIn합니다.

이 경우 transition이 먹지 않아 문제가 발생했습니다.

해결방법

Vue3에는 CSS 전환 클래스 및 JavaScript 훅 리스너를 지원하는 태그가 존재합니다. 즉 Vue에서 CSS의 변화 효과를 더 빠르고 쉽게 동적으로 지원해주는 것입니다. Transition 태그와 TransitionGroup 태그

Vue transition 태그는 두가지로 나뉘어 지는데 Transition 태그는 단일 요소로 사용하고, TransitionGroup 태그는 다중 요소로 사용됩니다. 이러한 태그들은 v-if, v-for, v-show 등의 특정 상황 태그에서도 사용 가능합니다.

따라서 emoticon-tab이 여러개이고 v-if문에도 적용 가능한 TransitionGroup 태그를 template 태그 밖에 적용하여 자연스럽게 변환 가능하게 해결했습니다 :)