프론트엔드
Vue 기능을 활용한 Transition 적용기
두줄요약
Vue Transition으로 버튼과 입력 영역의 등장·퇴장 애니메이션을 자연스럽게 구현한 경험을 소개했습니다. `v-if` 전환, `opacity` 조정, `mode="out-in"` 적용 과정을 정리했습니다.
핵심 내용
- Vue의
Transition컴포넌트를 활용해 요소의 등장·퇴장에 애니메이션을 적용한 경험 v-if/v-show로 바뀌는 버튼과 입력 영역 전환에opacity와height변화를 조합mode="out-in"으로 기존 요소가 사라진 뒤 새 요소가 나타나도록 전환 순서 조정
적용해볼 점
- 서로 다른 요소 간 자연스러운 전환이 필요할 때 Vue Transition 활용 검토
- 기본 CSS transition만으로 해결이 어려운 조건부 렌더링 상황에 적용 가능