-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
질문 있습니다
21.03.01 11:43 작성 조회수 169
2
위와같이 하고 있는데요.
화살표가 0에 위치했다가 다시 돌아가게끔 해주고싶은데,
처음에 400도가 나왔다고 하면 해당 위치에서 다음 값의 위치로만 움직입니다. 해당 이슈를 해결하려면 어떻게 해야할까요..?
아래 코드 첨부했습니다!
<!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>
div {
width: 400px;
height: 400px;
background: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 80px;
transition: all 600ms cubic-bezier(1, -0.06, 0.985, 1.01);
}
</style>
</head>
<body>
<div>
<h1>↑</h1>
</div>
<button>동작</button>
<script>
const btn = document.querySelector("button");
const arrow = document.querySelector("h1");
const arrowRotate = (aLot = 5) => {
const rotateValue = aLot * 360 + Math.ceil(Math.random() * 360);
arrow.style.transform = `rotate(${rotateValue}deg)`;
};
const arrowInit = () => {
arrow.style.transition = "0";
arrow.style.transform = `rotate(0deg)`;
};
const moveArrow = (aLot) => {
arrowInit();
setTimeout(() => {
arrowRotate(aLot);
}, 1000);
};
btn.addEventListener("click", () => {
moveArrow();
});
</script>
</body>
</html>
답변을 작성해보세요.
1
코딩일레븐
지식공유자2021.03.01
안녕하세요.
const arrowInit = () => {
arrow.style.transitionDuration = "0s"; <- 이부분을 수정하시면 됩니다.
arrow.style.transform = `rotate(0deg)`;
};
const arrowRotate = (aLot = 5) => {
const rotateValue = aLot * 360 + Math.ceil(Math.random() * 360);
arrow.style.transitionDuration = "1s";
arrow.style.transform = `rotate(${rotateValue}deg)`;
};
css의 transition-duration time을 바꿔주는 겁니다.
transition: all 1s cubic-bezier(1, -0.06, 0.985, 1.01);
답변 1