Transition 컴포넌트
v-enter-from, v-enter-active, v-enter-to, v-leave-* 클래스, 사용자 지정 클래스를 위한 name prop을 다룹니다.
Transition 컴포넌트은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Transition 컴포넌트의 역할
Vue에는 <Transition> 컴포넌트가 내장되어 있어 v-if 또는 v-show를 통해 삽입되거나 제거될 때 하나의 요소 또는 컴포넌트에 진입 및 퇴장 애니메이션을 적용합니다.
자체적으로 추가 DOM 요소를 렌더링하지 않으며, 자식 요소의 CSS class와 타이밍만 관리합니다.
<Transition>
<p v-if="show">Hello Vue</p>
</Transition>단일 요소만
<Transition>은 정확히 하나의 직접 자식 요소를 필요로 합니다. 여러 형제 요소를 감싸면 작동하지 않으므로 목록에는 대신 <TransitionGroup>을 사용하세요.
자식 요소는 v-if, v-show 또는 동적 컴포넌트로 전환되어야 합니다.
<!-- valid: one child -->
<Transition>
<div v-if="open" class="panel">Content</div>
</Transition>6개의 전환 class
진입 또는 퇴장 중에 Vue는 순서에 따라 6개의 class를 자동으로 추가하고 제거합니다.
v-enter-from/v-leave-from- 시작 상태v-enter-active/v-leave-active- 활성 단계(전환을 여기에 지정)v-enter-to/v-leave-to- 종료 상태
/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
transition: opacity 0.3s ease;
}전환 이름 지정하기
전환에 name prop을 지정하면 class 접두사가 v-에서 지정한 이름으로 바뀝니다. name="fade"을 사용하면 class가 fade-enter-from, fade-enter-active 등으로 바뀝니다.
<Transition name="fade">
<p v-if="show">Fades in and out</p>
</Transition>완전한 페이드 예제
고전적인 페이드 효과는 opacity를 애니메이션 처리합니다. 요소는 완전히 투명한 상태에서 시작하고, 활성 class가 전환을 선언하며, to class가 완전한 불투명도까지 이르게 합니다.
.fade-enter-from {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.3s ease;
}
.fade-enter-to {
opacity: 1;
}진입 순서 단계별로 살펴보기
요소가 삽입될 때:
- 페인트 전에
fade-enter-from과fade-enter-active가 추가됩니다(opacity 0). - 다음 프레임에
fade-enter-from이 제거되고fade-enter-to가 추가되므로 opacity가 1을 향해 애니메이션됩니다. - 전환이 끝나면
active와toclass가 모두 제거됩니다.
/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */퇴장 순서
퇴장은 leave class를 사용해 진입과 반대 방식으로 진행됩니다. 양방향에 같은 활성 규칙을 재사용하는 경우가 많습니다.
.fade-leave-from {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-leave-to {
opacity: 0;
}v-if와 v-show 비교
둘 다 전환을 실행합니다. v-if는 실제로 요소를 마운트하고 마운트 해제하지만, v-show는 요소를 DOM에 유지한 채 display를 전환합니다. v-show에서는 Vue가 활성 단계 전후에 display 전환을 처리하므로 애니메이션이 계속 표시됩니다.
<Transition name="fade">
<p v-show="visible">Toggled with display</p>
</Transition>initial 렌더링 시 표시하기
기본적으로 전환은 첫 렌더링에서 실행되지 않습니다. 컴포넌트가 처음 마운트될 때 진입 애니메이션이 재생되도록 appear prop을 추가하세요.
<Transition name="fade" appear>
<p>Animates in on page load</p>
</Transition>두 요소 사이에 Transition 적용하기
하나의 Transition 안에서 v-if / v-else를 사용해 두 요소를 교체하세요. 두 요소가 같은 태그라면 Vue가 서로 다른 요소로 인식하도록 각각 고유한 key를 지정하세요.
<Transition name="fade" mode="out-in">
<button v-if="loading" key="load">Loading...</button>
<button v-else key="done">Done</button>
</Transition>동작 줄이기와 접근성
움직임을 줄이기를 선호하는 사용자를 배려하세요. prefers-reduced-motion 미디어 쿼리로 전환을 비활성화하거나 짧게 만들어 애니메이션이 불편함을 유발하지 않도록 하세요.
@media (prefers-reduced-motion: reduce) {
.fade-enter-active,
.fade-leave-active {
transition: none;
}
}빠른 확인
fade-enter-from은 무엇을 정의하나요?
복습
내장 <Transition> 컴포넌트를 배웠습니다. 이 컴포넌트는 v-if/v-show로 전환되는 하나의 요소를 감싸고, 6개의 CSS class(enter-from, enter-active, enter-to 및 각각에 대응하는 leave class)를 적용합니다. 또한 name 접두사, 첫 렌더링을 위한 appear, 교체를 위한 mode를 지원합니다.
자주 묻는 질문
“Transition 컴포넌트” 강의는 무료인가요?
네 — “Transition 컴포넌트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Transition 컴포넌트”에서 뭘 배우나요?
v-enter-from, v-enter-active, v-enter-to, v-leave-* 클래스, 사용자 지정 클래스를 위한 name prop을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Transition 컴포넌트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.