실무에서 에니메이트가 끝나는 그 순간에 이어서 무슨 작업을 하고 싶을 때가 있다.
a라는 요소가 top:0에서 top:100으로 이동되고난 바로 직후, 하고싶은 거라던지 말이다.
여태까지는 다른 꼼수로 해당 문제를 우회했었는데
다음과 같은 방법으로 직접적으로 해결했다.
먼저
setAnimateAndWatch라는 함수에 매개변수를 3개 셋팅한다.
el: 타겟 elementdirection:여기서는 top,bottom,left,rightvalue:100px이라면 100
그리고 내부에서 해당 매개변수를 이용해 로직을 만든 Promise를 리턴한다.코드는 아래와 같다. 목표 위치 도달후, el을 반환해준다.
const setAnimateAndWatch = (el, direction, value) => {
const AnimateAndWatchPromise = new Promise((resolve, reject) => {
const AnimateAndWatch = () => {
rectEl.style[direction] = `${value}px`;
const rect = el.getBoundingClientRect();
if (rect[direction] == value) {
console.log("목표위치 도달, 추적종료");
resolve(el);
} else {
console.log("추적중");
console.log(rect);
requestAnimationFrame(AnimateAndWatch);
}
};
AnimateAndWatch();
});
return AnimateAndWatchPromise;
};
전체 사용 예시는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.rect {
display: block;
width: 100px;
height: 100px;
transition: 1s;
position: absolute;
background: red;
top: 0;
left: 200px;
}
</style>
</head>
<body>
<div class="rect"></div>
<button>start</button>
<script>
const rectEl = document.querySelector(".rect");
const btnEl = document.querySelector("button");
const setAnimateAndWatch = (el, direction, value) => {
const AnimateAndWatchPromise = new Promise((resolve, reject) => {
const AnimateAndWatch = () => {
rectEl.style[direction] = `${value}px`;
const rect = el.getBoundingClientRect();
if (rect[direction] == value) {
console.log("목표위치 도달, 추적종료");
resolve(el);
} else {
console.log("추적중");
console.log(rect);
requestAnimationFrame(AnimateAndWatch);
}
};
AnimateAndWatch();
});
return AnimateAndWatchPromise;
};
btnEl.addEventListener("click", () => {
const AnimateAndWatch = setAnimateAndWatch(rectEl, "top", 300);
AnimateAndWatch.then(console.log);
});
</script>
</body>
</html>
'공부' 카테고리의 다른 글
| http status code 201,200,404 얕고 간단하게만. (0) | 2021.12.12 |
|---|---|
| http request와 response 얕고 쉬운 설명 (0) | 2021.12.12 |
| react 여러개의 상태값 변경 (0) | 2021.11.15 |
| redux (0) | 2021.11.12 |
| 퍼블리셔에서 프론트엔드 개발자 - 공부일지 21.01.15 (0) | 2021.01.15 |
댓글