각 transition과 animation은 시작과 끝을 나타내주는 이벤트들이 존재한다
- transitioinstart 트랜지션이 시작 할 때
- transitionend 트랜지션이 종료 될 때
- animationstart 애니메이션이 시작 될 때
- animationend 애니메이션이 종료될 때
- animationiteration 애니메이션 반복 시
transition 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.ball {
/* position을 absolute로 해주거나 마진을없애주거나 */
left: 0;
top: 0;
width: 30px;
height: 30px;
/* margin:-15px 0 0 -15px; */
border-radius: 50%;
background: red;
transition: 1s;
}
.ball.end{
background: dodgerblue;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ballElement = document.querySelector(".ball");
window.addEventListener("click", function (e) {
console.log(e.clientX, e.clientY);
ballElement.style.transform = `translate(${e.clientX -15}px,${e.clientY - 15}px )`;
});
ballElement.addEventListener('transitionend', function(e){
ballElement.classList.add('end');
console.log(e.elapsedTime);
console.log(e.propertyName);
})
</script>
</body>
</html>
클릭한 방향으로 해당 ball element를 이동시킨다.
clientY, clientX
브라우저 페이지내의 위치를 반환한다, 스크롤은 무시하고 해당 페이지를 기준으로한다.
elapsedTime
해당 이벤트가 발생하는데 걸린 시간을 나타낸다 transition을 1s로 설정했기 때문에
1이 나오게 된다.
propertyName
event가 발생할때 변경되는 부분들을 나타내준다.
애니메이션 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes ball-ani{
from{
transform: translate(0, 0);
}
to{
transform: translate(200px, 200px);
}
}
.ball {
left: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
/* animation: ball-ani 1s 3 alternate forwards; */
}
.ball.end{
background: dodgerblue;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ballElement = document.querySelector(".ball");
ballElement.addEventListener('click', function(){
ballElement.style.animation ='ball-ani 1s infinite alternate forwards';
})
ballElement.addEventListener('animationiteration', function(e){
ballElement.classList.toggle('end');
})
</script>
</body>
</html>
클릭시 animation을 추가해주고 animationiteration을 활용해서 반복시마다 end class를 toggle해주는 방식이다
www.inflearn.com/course/interactive_web/dashboard
위의 강의를 듣고 정리한 글입니다.
'JavaScript > javascript 활용하기' 카테고리의 다른 글
| CSS - 스크롤 이벤트 (0) | 2020.12.06 |
|---|---|
| CSS - 움직이는 문 만들기 (0) | 2020.12.03 |
| 이벤트 위임 처리하기 (0) | 2020.11.29 |
| javascript를 활용한 tic tac toe 만들어보기 (0) | 2020.07.08 |
| 자바스크립트를 활용해 현재 날짜부터 마지막 날짜 구하기 (0) | 2020.03.04 |
