Vue Academy · 강의

목록 애니메이션을 위한 TransitionGroup

v-for 목록 애니메이션, 이동 전환, 지연 시간을 활용한 단계적 애니메이션을 다룹니다.

레슨 4/413개 단계

목록 애니메이션을 위한 TransitionGroup은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

목록에 애니메이션 적용하기

<Transition>은 단일 요소를 처리합니다. v-for로 렌더링한 목록에는 <TransitionGroup>을 사용합니다. 항목이 추가되거나 제거되거나 순서가 바뀔 때 애니메이션을 적용할 수 있습니다.

tag 속성

Transition과 달리 TransitionGroup은 실제 래퍼 요소를 렌더링할 수 있습니다. tag="ul" 또는 원하는 태그를 전달하면 목록 항목을 감싸는 해당 요소가 출력됩니다.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

모든 항목에는 key가 필요함

각 항목에 고유한 :key를 지정하는 것은 필수입니다. Vue는 이를 사용해 어떤 항목이 이동했는지, 진입했는지, 이탈했는지를 추적합니다. 애니메이션 목록의 키로 배열 인덱스를 사용하지 마세요.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

진입 및 이탈 클래스

TransitionGroup은 Transition과 동일한 진입 및 이탈 클래스를 사용합니다. 항목별 표시와 제거를 위해 이 클래스들을 정의하세요.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

특별한 move 클래스

가장 눈에 띄는 기능은 -move 클래스(예: list-move)입니다. 항목 순서가 바뀌면 Vue가 변환 전환을 사용해 각 항목을 새 위치로 부드럽게 이동시킵니다.

.list-move {
  transition: transform 0.4s ease;
}

FLIP 기법

-move의 내부에서는 FLIP이 사용됩니다. F먼저 이전 위치를 기록하고, L마지막으로 새 위치를 읽은 다음, I변환을 적용해 움직이지 않은 것처럼 보이게 합니다. 그런 다음 변환을 제거하여 P재생합니다. Vue가 이 과정을 자동으로 처리합니다.

/* Vue computes: translate(oldX - newX) then animates to 0 */

이탈하는 항목에는 절대 위치 지정이 필요함

제거 중인 요소는 여전히 공간을 차지하므로 주변 항목의 이동 애니메이션이 깨질 수 있습니다. leave-active 클래스에 position: absolute를 설정해 이탈하는 항목을 레이아웃 흐름에서 제거하세요.

.list-leave-active {
  position: absolute;
}

정렬 가능한 목록 예시

진입, 이탈, 이동 클래스를 함께 사용하면 Vue가 삽입, 제거, 섞기 동작을 모두 동시에 애니메이션으로 처리합니다.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

transitionDelay로 시간차 적용

항목이 하나씩 나타나게 하려면 항목 인덱스를 기준으로 인라인 transition-delay를 바인딩하세요. 각 항목은 이전 항목보다 조금 더 오래 기다립니다.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

JavaScript 훅으로 시간차 적용

데이터에 따른 시간차를 적용할 때는 JavaScript 훅과 data-index 속성을 사용할 수도 있습니다. 요소의 인덱스만큼 각 onEnter의 실행을 지연시키면 됩니다.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

성능 참고 사항

FLIP은 GPU에 친화적인 transform을 애니메이션으로 만듭니다. 목록 크기를 적절하게 유지하고, 부드러운 60fps 움직임을 위해 width나 top처럼 레이아웃을 다시 계산하게 하는 속성보다 transform과 opacity를 우선 사용하세요.

간단히 확인하기

list-move 클래스는 무엇을 가능하게 하나요?

인터랙티브 레슨에서 답해보세요

복습

목록에 <TransitionGroup>을 사용하는 방법을 배웠습니다. tag로 래퍼를 렌더링하고, 모든 항목에 고유한 :key를 지정하며, 진입 및 이탈 클래스와 함께 -move 클래스를 사용해 FLIP 기반 순서 변경 애니메이션을 적용합니다. 이탈하는 항목은 절대 위치로 배치하고, 인덱스 기반 transitionDelay로 시간차 효과를 만들 수 있습니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“목록 애니메이션을 위한 TransitionGroup” 강의는 무료인가요?

네 — “목록 애니메이션을 위한 TransitionGroup” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“목록 애니메이션을 위한 TransitionGroup”에서 뭘 배우나요?

v-for 목록 애니메이션, 이동 전환, 지연 시간을 활용한 단계적 애니메이션을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“목록 애니메이션을 위한 TransitionGroup” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기