Transition 이벤트
CSS에서 transition은 정해진 시간 동안 요소의 속성을 서서히 변화시키는 속성이다.
transition 속성은 다음과 같은 순서로 정의할 수 있다.
1. 해당 요소에 추가할 CSS 스타일 transition 효과를 설정
2. 추가할 transition 효과가 지속될 시간을 설정
transition은 자동으로 발동되지 않기때문에, :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동된다.
만약 트랜지션이 자동 발동(self-invoking transition)이 되도록 하고 싶다면 애니메이션 이벤트를 사용하도록 한다.
전환(transition)을 위해 제공되는 속성(property)의 종류
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
테스트를 위해서 ball 이라는 element을 만들어보자
그리고 클릭 이벤트를 걸어 클릭한 지점의 X와 Y축의 값을 콘솔로 찍어본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transition/Animation Event</title>
<style>
.ball {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
transition: 1s;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ballElem = document.querySelector('.ball');
window.addEventListener('click', function (e) {
console.log(e.clientX, e.clientY);
});
</script>
</body>
</html>
X축의 값 122, Y축의 값 95를 콘솔에서 확인할 수 있다. 이어서 이 값들로 빨간 공의 위치를 이동시켜주는 이벤트를 걸고 싶다면,
ballElem의 style.transform안에서 앞서 확인해본 clientX와 clientY 값을 통해 빨간 공의 위치를 이동시켜준다.
const ballElem = document.querySelector('.ball');
window.addEventListener('click', function (e) {
ballElem.style.transform = 'translate(0px, 0px)';
});
처음 translate의 값인 0px, 0px을 분리하여 각각 clientX와 clientY값을 넣어준다.
const ballElem = document.querySelector('.ball');
window.addEventListener('click', function (e) {
ballElem.style.transform = 'translate(' + (e.clientX - 15) + 'px, ' + (e.clientY - 15) + 'px)';
});
확인을해보면, 사용자가 클릭하는 방향으로 공이 움직이는 것을 확인할 수 있다.
위 코드에서 e.clientX - 15, e.clientY - 15의 값은 바디에 있는 margin 영역을 이벤트 객체에서 영향을 받고 있기 때문에,
이를 해결하기위해 ball의 position: absolute, left: 0; top: 0;으로 각각 적어주고, 마우스의 커서가 공의 가운데로 오게 하기위해,
width와 height의 값인 30px / 2 = 15px로 클릭한 위치에 정확한 센터가 잡힐 수 있게끔 해준다.
본격적으로 transition 이벤트를 살펴보자
transition으로 움직이는 오브젝트(= 공)에 빨간 공이 파란 공으로 변하는 이벤트를 걸어줄 것이다.
이때 addEventListner로 transition이 끝나는 시점을 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transition/Animation Event</title>
<style>
.ball {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
transition: 1s;
}
.ball.end {
background: dodgerblue;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ballElem = document.querySelector('.ball');
window.addEventListener('click', function (e) {
ballElem.style.transform = 'translate(' + (e.clientX - 15) + 'px, ' + (e.clientY - 15) + 'px)';
});
ballElem.addEventListener('transitionend', function() {
ballElem.classList.add('end');
});
</script>
</body>
</html>
처음의 빨간 공이 파란공으로 바뀌었다.
콘솔에서 e.elapsedTime을 작성하면 1 이라는 숫자를 확인할 수 있는데,
이것은 transition: 1s의 transition이 재생되는 데 얼마나 시간이 경과되는 지를 보여준다.
이외에도 propertyName을 콘솔에 찍어보면 2초 후 transform이라는 속성이 작동되고, 2초 후 background-color가 발생하는 것을 알 수 있다.
추가하자면
'transitionend' 가 있다면 역시 'transitionstart'도 존재한다.
하지만 강사님 말씀에 따르면 정황상 transitionend가 쓰일 경우가 훨씬 많기 때문에 예제에서도 transitionend로 진행했다.
이렇게 CSS 트랜지션은 간단하면서 강력한 비주얼 효과를 줄 수 있다.
속성 변경시 즉시 영향을 주는 것이 아닌 일정 기간에 걸쳐서 서서히 변화가 일어날 수 있도록 하는데,
두 상태 사이에 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부른다. (시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문)
다음 장에서는 CSS 애니메이션에 대해서 배워보자.
'Front End' 카테고리의 다른 글
| 인터랙티브 웹 개발 제대로 시작하기-타이밍 제어하기 (0) | 2022.02.20 |
|---|---|
| 사파리os 에서 window.open(url, '_blank')시 페이지 중복 오픈현상 버그수정 (0) | 2022.02.14 |
| 인터랙티브 웹 개발 제대로 시작하기-스크롤 다루기 (0) | 2022.02.05 |
| 인터랙티브 웹 개발 제대로 시작하기-객체(Object) (0) | 2022.01.26 |
| 인터랙티브 웹 개발 제대로 시작하기-자바스크립트 이벤트 다루기 (0) | 2022.01.07 |
