[Vue.js] Vue 애니메이션(Animate) #1 - Transition

출처

[Vue.js] Vue 애니메이션(Animate) #1 - Transition

• 이번 포스팅은 Vue 애니메이션에 대해 알아보자.
• 애니메이션을 이용해 사용자 경험을 향상할 수 있다.
  • 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나
  • 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다.

목차

1. Transition(이번 포스팅)
   1. Page Transition
   2. Transition Group
2. Javascript Hooks + Velocity
3. GSAP

Transition(트랜지션)

• Vue에서 Transition 래퍼(Wrapper) 컴포넌트를 기본으로 제공하고 있다. 이 Transition 컴포넌트를 이용해 다양한 애니메이션 효과를 낼 수 있다.
• Transition은 번역하자면 전환이다. 말 그대로 from → to로 되는 것이 전환이다. 전활 될 때 애니메이션을 할 수 있게 도와준다.
  • on → off, off → on
  • open → closed, closed → open

Transition 스타일 클래스 알아보기

.v-enter { /* starting style */ opacity: 0; } 
.v-enter-active { /* active entering style */ transition: opacity 2s ease-in; } 
.v-leave-active { /* active leaving style */ transition: opacity 2s ease-out; } 
.v-leave-to { /* ending style */ opacity: 0; }

• 간단히 설명하겠다.
• v-enter는 element가 dom에 추가되기 직전에 상태(from)
• v-enter-active는 element가 dom에 보일 때까지 과정 상태(to)
• v-leave-active는 element가 dom에서 없어질 때까지 과정 상태(from)
• v-leave-to는 element가 dom에 없어진 상태(종료 to)
• v-enter-to, v-leave도 있지만 기본 스타일이라 따로 지정하지 않는다. (ex. opacity 1, 항상 보인다. scale - 항상 1이다.)

Transition fade 예제

<template> 
  <div> 
    <button @click="toggleModal">
      Open
    </button> 
    <transition name="fade"> 
      <div
        v-if="isOpen"
        class="modal"
      > 
        <p> 
          <button @click="toggleModal">
            Close
          </button> 
        </p> 
      </div>
    </transition> 
  </div> 
</template> 

<script> 
export default { 
data() { 
return { 
isOpen: false 
} 
}, 
methods: { 
toggleModal() { 
this.isOpen = !this.isOpen 
} 
} 
} 
</script> 
<style> 
.fade-enter { opacity: 0; } 
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease-out; } 
.fade-leave-to { opacity: 0; } 
</style>

• 예제 코드 : https://codesandbox.io/s/wild-feather-jqx5v?file=/package.json

Page Transtions(페이지 트랜지션)

• vue-router를 사용해 페이지 이동시 애니메이션 효과를 넣는 법을 알아보자.
• 기존과 똑같이 Transition 래퍼 컴포넌트를 감싸주면 된다.

<template> 
<div id="app"> 
<div id="nav"> 
<router-link to="/">Modal</router-link> | 
<router-link to="/about">About</router-link> 
</div> 
<transition name="fade"> 
<router-view /> 
</transition> 
</div> 
</template>

• 하지만, 이렇게만 작성하면 fade-in, fade-out 되는 페이지 컴포넌트들이 동시에 애니메이션이 작동되므로 보기 좋지 않다. 이걸 수정하기 위해서는 transition modes 를 살펴보자.

Transition Modes(트랜지션 모드)

• in-out : 새로운(in) 트랜지션 엘리먼트가 먼저 작동되고, 기존(out) 트랜지션 엘리먼트가 그다음 동작한다.
• out-in : 기존(in) 트랜지션 엘리먼트가 먼저 작동되고, 새로운(out) 트랜지션 엘리먼트가 그 다음 동작한다.
• 기본 설정은 in-out이다. 아래처럼 mode를 추가하고 out-in으로 작성하면 매끄러운 페이지 이동이 된다.

<transition name="fade" mode="out-in"> 
<router-view /> 
</transition>

slide transition

• fade in, out으로 페이지가 이동되는 것보다 더 액티브하게 왼쪽으로 out 되고 오른쪽에서 in 되는 slide-fade 애니메이션을 적용해보자.

<transition name="slide-fade" mode="out-in"> 
	<router-view /> 
</transition>

Transition-group

• 컴포넌트/엘리먼트 그룹에 대해 전체 트랜지션 효과를 넣는 방법을 살펴보자.
• contacts 데이터로 ul > li 구조로 만들었고 여기 li 엘리먼트들에게 동일한 트랜지션 효과를 넣어보자.
  • contact를 추가할 수 있다.(addContact)

<template>
	<div>
		<input v-model="newContact" placeholder="Name" type="text" />
		<button @click="addContact">Add Contact</button>
		<ul>
			<li v-for="(contact, index) in contacts" :key="index">{{ contact }}</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			newContact: '',
			contacts: ['Beau Thabeast', 'Cindy Rella', 'Alice Wunderlind'],
		};
	},
	methods: {
		addContact() {
			this.contacts.push(this.newContact);
			this.newContact = '';
		},
	},
};
</script>

• transition 래퍼 컴포넌트를 사용하고 tag 속성을 이용해 대체할 태그를 입력한다.
• 입력하지 않으면 기본 span 태그로 대체된다.
• transition 컴포넌트와 똑같이 name 속성을 이용한다.

 

<transition-group tag="ul">
	<li v-for="contact in contacts" :key="contact" name="slide-up" apper>
		{{ contact }}
	</li>
</transition-group>
<style>
.slide-up-enter {
	transform: translateY(10px); /* start 10px down*/
	opacity: 0;
}
.slide-up-enter-active {
	transition: all 0.2s ease;
}
</style>

• style을 보면 enter와 관련된 스타일만 작성했다. 현재는 addContact로 추가하는 기능만 있기 때문이다.
• 새로고침 하면 page transition 효과가 그대로 transition-group을 덮어 씌운다.
• appear 속성을 사용하면 쉽게 slide-up 효과로 보여질 수 있다.

move transition-group

• sort 기능을 추가하고 li들이 sorting 될 때 트랜지션 효과를 추가해보자.

<template> 
... 
<button @click="sortContacts">Sort</button> 
... 
</template> 
<script> 
methods: { 
...
sortContacts() { 
this.contacts = this.contacts.sort() 
} 
} 
</script>

• sort 기능을 추가하고 실행해보면 트랜지션 효과가 되지 않는다.
• v-move를 스타일에 추가해야 한다.

.slide-up-enter { transform: translateX(10px); opacity: 0; } 
.slide-up-enter-active { transition: all 0.2s ease; } 
.slide-up-move { transition: transform 0.5s ease-out; }

• 예제 코드 : https://codesandbox.io/s/unruffled-darwin-w75og
• 참고 : https://kr.vuejs.org/v2/guide/transitions.html

 

출처: https://hasudoki.tistory.com/entry/Vuejs-Vue-애니메이션Animate-1-Transition [하수도키의 성장일기]