[Vue.js] transition을 이용해서 애니메이션 속도 나타내기.

 

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

버튼에 마우스를 대면
색이 천천히 반전되도록
만들어볼 것이다.

 

1. 실행화면

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

 

 

 

---

 

 

 

2. MainView.vue

버튼을 설정하고 btn이란 클래스를 붙여줬다.

<template>
  <div class="main-view">
    <button class="btn" > Click </button>
  </div>
</template>

 

전체 화면 설정이다.

<style scoped>의 코드

.main-view {
  position: relative;
  width:  100vw;
  height: 100vh;
  background-color: lemonchiffon;
}

 

버튼이 중앙에 위치하도록 만들었다. 텍스트 컬러는 화이트이고, 배경색은 블랙이다.

<style scoped>의 코드

.btn{
  position: absolute;
  width: 80px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
  background-color: black;
  cursor:  pointer;
  transition: background-color 0.8s ease, border 0.8s ease;
}

 

배경컬러는 진분홍색으로 변경하고, 테두리도 border를 이용하여 변경되도록 할 것이다. 이때 마우스 커서를 대면 색상이 변하도록 만들어주는 스타일을 :hover라고 한다. :hover에 transition을 넣어 색상 변경의 속도를 조절해 볼 것이다. transition은 애니메이션 속도를 조절하는 방법을 제공한다.

 

transition: [속성] [지속시간] [타이밍 함수] [지연 시간];으로 코드를 적는데, 속성으로 너비나 높이가 들어갈 수도 있고 테두리만 들어갈 수도 있고 다양하게 사용가능하다. 현재 코드에서는 배경컬러(background-color)와 테두리(border)를 속성으로 지정했다. 지속시간은 0.8s로 지정했다. 타이밍 함수는 속도가 어떻게 변화할지 결정하는데, 커스터마이징도 가능해서 어떤 가속도 곡선을 따르게 할 수도 있다. 여기서는 내부에서 설정해 주는 ease로 설정했다. ease 말고 linear, ease-in, ease-out도 있으니 한번씩 해보면 좋을 듯하다. 현재 코드에서 지연 시간은 설정하지 않았지만, 애니메이션의 출발 시간을 정할 수도 있다. 

 

여러 속성을 지정하고 싶으면 위의 코드처럼 ,을 찍어 속성을 이어 적으면 된다.

 

<style scoped>의 코드

.btn:hover {
  background-color: #ed3597;
  color: white;
  border: 3px solid #ed3597;
  cursor: pointer;
}

 

 

아래 링크에 들어가면 직접 타이밍함수를 설정했을 때 어떻게 동작하는지 예시를 볼 수 있다.

 

- 커스터마이징

cubic-bezier.com

 

 

이때 주의할 점이 있다.  두 영상을 살펴보자.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

두 영상의 차이점은 마우스가 버튼에서 멀어지면서 생기는 변화이다. 그 이유는 transition이 어느 클래스에 붙어있는지에 따라 달라진다. .btn 클래스인 버튼을 만든 클래스에 transition 코드를 넣어두면 마우스를 버튼에서 떼도 같은 속도로 색상이 돌아간다. 그런데 :hover에 transition 코드를 넣어두면 마우스를 뗄 땐 코드가 적용되지 않는다. (양방향 적용이 안 되는 것)

 

:hover가 커서를 올리면 적용되는 클래스니까 transition 코드를 hover에 넣을 수 있다.(내가 그랬음..ㅎㅎ) 그런데 :hover는 올렸을 때만 적용되게 하니까, 반대로 떼면? 적용이 안되는 것이다. 양방향으로 적용하고 싶다면 꼭 transition 코드를 .btn 클래스에 넣어야 한다.

 

 

 

- transition

Vue.js