[Udemy Vue 완벽가이드 Section14] 193. 애니메이션 기초 및 CSS 전환

화면 가운데의 보라색 사각형을 바꿔보자.

CSS와 Vue를 사용해서 이 요소에 애니메이션 효과를 넣어보자.

Vue를 통해 애니메이션 구현을 지원받으면 좋은 지점과 실제로 Vue의 지원을 받는 방법도 배워볼거다.

 

애니메이션 효과는 어떻게 추가할까?

간단한 것부터 시작해보자.

'Animate' 버튼을 클릭하면 화면의 보라색 사각형, 즉 이 블록에 애니메이션 효과가 적용되도록 해보자.

 

<div class="block">이 있는 App.vue 파일을 열고

Animate 버튼에 클릭 리스너(@click)를 추가하자.

<!--App.vue-->
<div class="block"></div>
<button @click="">Animate</button>

블록을 왼쪽으로 약간 움직이게 해보자.

그러기 위해 methods에 새 메서드 'animateBlock'를 추가하자.

클릭 시 트리거되어야하는 메서드이므로, 클릭 리스너에 연결하자.

 

data()에는 블록에 애니메이션 효과 적용 여부를 제어하는 데이터를 관리할 거다. 이 경우 버튼의 클릭 여부가 애니메이션 효과를 제어한다.

<!--App.vue-->
<div class="block" :class="{ animate: animatedBlock }"></div>
<button @click="animateBlock">Animate</button>

data() {
 return {
  animatedBlock: false,
 }
},
methods: {
 animateBlock() {
  this.animatedBlock = true;
 },
}

<style>
.animate {
  transform: translateX(-50px);
}
</style>

 

이제 App.vue 파일에 animatedBlock 데이터 프로퍼티가 생겼으므로, 이 데이터 프로퍼티를 활용해서 <div>에 조건부로 CSS 클래스를 추가할 수 있다.

웹 개발에서는 JS없이 CSS만으로도 애니메이션 효과를 줄 수 있다.

애니메이션 시작이나 특정 CSS 코드삽입에는 JS가 필요할 수도 있지만, 그 외에는 CSS 하나만으로도 충분히 작업이 가능하다.

 

<div>에 축약어 콜론을 사용해 동적 클래스(:class)를 만들고 animate 클래스에 바인딩한다. class이름은 원하는대로 정하면 된다.

새로 추가한 데이터 프로퍼티인 'animatedBlock'이 true일 때, div요소에 animate 클래스가 추가된다.

 

# transform

이제 animate클래스를 <style>에서 정의해보자.

.animate를 추가하고 블록을 움직이는 데에는 CSS의 transform 프로퍼티를 쓸거다. CSS에 내장된 프로퍼티이고, Vue.js와는 무관하다.

translateX도 추가해서 요소가 X축 위에서 움직이게 해보자.

 

this.animatedBlock 프로퍼티를 사용해서 animate클래스를 동적으로 추가하고, 하단 <style>에서 .animate 클래스의 설정을 마쳤으므로 파일 저장 후, Animate를 클릭하면 블록이 움직인다.

 

▼

좀 더 많이 움직이게 해볼 수도 있다.

50px이 아니라 150px을 이동하게 해보자.

.animate {
  transform: translateX(-150px);
}

아쉬운 점은, 블록이 순간이동을 한다. 아직 애니메이션효과가 적용되지 않았다. 새로운 위치로 즉각적으로 옮겨간다.

우리가 원하는 건 이런게 아니라 자연스러운 애니메이션 효과.

 

# transition

CSS를 사용하면 손쉽게 구현할 수 있다.

div의 기본 CSS 클래스인 block 클래스에 transition, 즉 전환 프로퍼티를 추가해보자.

transition 프로퍼티도 CSS 내장 프로퍼티이고, Vue와는 아무런 상관이 없다.

.block {
  width: 8rem;
  height: 8rem;
  background-color: #290033;
  margin-bottom: 2rem;
  transition: transform 0.3s ease-out;
}

 

1/ transition할 CSS프로퍼티

transition 프로퍼티는 여러 값을 취하는데, 어떤 CSS 프로퍼티를 전환할 것인지에 대한 값이 필요하다.

예를 들어, opacity에 애니메이션 효과를 주겠다고 설정해 볼 수 있지만,

.block에는 불투명도 설정이 없으니 의미가 없다.

all을 입력해서 애니메이션 효과를 넣을 수 있는 모든 CSS 프로퍼티에 효과를 주거나,

transform프로퍼티를 바꿨다는 것을 알고 있으므로 transform 프로퍼티를 대상으로 설정하는 것도 괜찮다.

 

.block 기초 클래스의 초깃값에는 transform 프로퍼티가 없지만 우리는 이미 translateX를 -150px로 설정해두었다.

이 효과가 적용되면 transform을 넣은 transition 프로퍼티는 transform 프로퍼티에 적용되는 변화나 transform 프로퍼티가 작동하는 모든 변화에 애니메이션 효과를 적용하라고 CSS에 알려준다.

 

 

2/ '애니메이션 효과' 지속시간

애니메이션 효과를 적용하고 싶은 프로퍼티 이름 외에도 애니메이션 효과가 지속되는 시간도 지정해야한다.

여기서는 0.3초로 설정해보자.

(참고로 여기에 설정할 수 있는 다른 값이나 CSS 애니메이션의 원리에 대해 좀 더 알고싶다면 CSS를 주제로 하는 강의나 무료 CSS 애니메이션 자료를 찾아봐라.)

이제 transform 프로퍼티의 변화에 애니메이션 효과 0.3초를 적용했다.

 

3/ 변화의 리듬

'ease-out' 함수도 정의할 수 있다. 이 함수는 애니메이션의 속도를 높이거나 낮춰준다.

 

** transition에 대해 ▼

[CSS] transition (트랜지션)

 

파일 저장 후, 'Animate'버튼을 클릭하면, 효과가 적용된 걸 볼 수 있다.

지정한 지속 시간에 맞춰서 움직인다.

 

animatedBlock을 true로 설정해서 애니메이션 구동에 Vue도 사용하고 있는데, 

초깃값은 false지만, true로 설정된다.

따라서 동적 class 등 여기에는 Vue가 사용되지만, 그 다음부터는 CSS만 활용되고 transform 프로퍼티와 transition 프로퍼티를 결합해 효과를 적용했다.

 

중요한 건 바로 이 방법이 적절한 애니메이션 적용법이라는 것. 애니메이션 적용 시 권장하는 방법.

간단한 전환으로는 부족한 경우, 사용할 수 있는 대안도 있다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.