[to-do-app] Vue Transition

 

 

 transition-group 

<template>
	<div>
		<transition-group name="list" tag="ul">
			<!-- v-for="(item, index) in this.$store.state.todoItems" -->
			<!-- getters 로도 접근 가능 -->
			<li v-for="(todoItem, index) in this.storedTodoItems" v-bind:key="index" class="shadow">
				<i
					class="fa-solid fa-check checkBtn"
					v-on:click="toggleComplete({ todoItem, index })"
				></i>
				<span v-bind:class="{ textCompleted: todoItem.completed }">
					{{ todoItem.item }}
				</span>

				<span class="removeBtn" v-on:click="removeTodo({ todoItem, index })">
					<i class="fa-solid fa-trash"></i>
				</span>
			</li>
		</transition-group>
	</div>
</template>

Vue 는 UI적으로 간편하게도 트랜지션 컴포넌트가 이미 프레임워크에 내재되어 있습니다.

해당 효과는 transition-group 태그를 통해 사용할 수 있으며, 해당 element 에 애니메이션 효과를 달 수 있습니다.

name 속성은 해당 트랜지션의 이름이며, tag 는 해당 트랜지션이 적용될 element 를 이릅니다.

위의 코드는 list 라는 이름을 가진 ul 태그 transition-group 입니다.

Vue3 버전 부터는 TransitionGroup 이라는 이름으로 사용할 수 있습니다.

 

 

 Transition CSS 

/* 리스트 트랜지션 */
.list-enter-active,
.list-leave-active {
	transition: all 0.4s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
	opacity: 0;
	transform: translateY(30px);
}

list 라는 이름을 가지고 있으므로 해당 트랜지션 효과 앞에 list 라는 명칭을 달아줍니다.

이로써 그룹 전체에 트랜지션을 달 수 있게 되었습니다.

뷰 트랜지션이 안되는 오류가 생길 수 있는데 이때는 enter-from 가 아니라 enter 를 사용합시다.

 

 

 Vue Transition 

https://kr.vuejs.org/v2/api/index.html#transition

API — Vue.js

해당 도큐먼트를 참고하시길 바랍니다.

 

 

 결과 화면 

 

 

 

 

 

 

#Vue Transition #뷰 트랜지션 #TransitionGroup

---