-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
2:20분 이해가 가지 않습니다.
23.11.30 14:17 작성 조회수 146
0
<!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>
.box {
width: 100px;
height: 100px;
background: coral;
transition: 1s;
}
body {
margin: 0;
}
.box-action {
transform: translateX(300px);
background: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector(".box");
box.addEventListener("click", () => {
box.classList.toggle("box-action");
});
</script>
</body>
</html>
안녕하세요 강사님.
toggle 해서 클릭 하면 상자가 300px 인 곳으로 이동하는 건 이해 하였는데, 다시 클릭 하면 왜 기존의 위치로 가는건가요?
css에서는 가로 세로 100px 이라고만 했는데....
이해가 가지 않습니다.
답변을 작성해보세요.
1
1분코딩
지식공유자2023.11.30
translateX(300px)의 의미는 절대 좌표 300px 위치로 이동하는게 아니라, 원래 자기의 위치에서 300px 이동하는 거랍니다. 그래서 box-action 클래스가 있을 경우 원래 위치에서 300px만큼 이동하는 것이고, box-action 클래스가 빠졌으니 원래 자리로 돌아가는 거죠~
답변 1