2:20분 이해가 가지 않습니다.
284
43 asked
<!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 이라고만 했는데....
이해가 가지 않습니다.
Answer 1
1
translateX(300px)의 의미는 절대 좌표 300px 위치로 이동하는게 아니라, 원래 자기의 위치에서 300px 이동하는 거랍니다. 그래서 box-action 클래스가 있을 경우 원래 위치에서 300px만큼 이동하는 것이고, box-action 클래스가 빠졌으니 원래 자리로 돌아가는 거죠~
Json 플러그인 사용시 variable collection 없음
0
12
1
배리어블 목록 없음
0
21
3
Token 등록 방법 문의
0
18
1
3강 질문
0
15
1
스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여
0
133
1
vscode에서 svg파일 불러오기 질문
0
3763
1
모바일 화면 최적화 방법 질문드립니다!
0
229
1
key.svg 이미지
1
209
1
Vue.js 적용 방법
0
278
1
강사님 vscode 폰트와 색상이 뭔가요
0
648
2
web animation api를 통한 apple page
0
490
2
리액트에서 scroll-timeline.js 불러오는 법
0
726
1
특정 시점에 자바스크립트 호출은 어려울까요?
0
320
2
section04 - 각각의 객체에 개별 애니메이션 적용하기
0
461
3
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
0
736
2
scroll-timeline.js 파일
0
544
1
선생님 Section4에 제목 오타난것같습니다!
0
389
1
keyframeEffect를 찾을 수 없다고 나와요
0
504
1
제이쿼리 animate()와는 다른걸까요?
0
402
1
scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??
0
559
1
넓이를 %로 적용하긴 어려울까요?
0
434
2
scrollTimeline polyfill 에 관해서
0
812
1
아직 강의를 보진 않았는데
2
575
1
이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?
0
1151
2