inflearn logo
강의

Course

Instructor

The new standard for web animation, Web Animations API

Take a look at the Transition code

2:20분 이해가 가지 않습니다.

305

vividjtj7313

43 asked

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 이라고만 했는데....

이해가 가지 않습니다.

 

HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api

Answer 1

1

studiomeal

translateX(300px)의 의미는 절대 좌표 300px 위치로 이동하는게 아니라, 원래 자기의 위치에서 300px 이동하는 거랍니다. 그래서 box-action 클래스가 있을 경우 원래 위치에서 300px만큼 이동하는 것이고, box-action 클래스가 빠졌으니 원래 자리로 돌아가는 거죠~

푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?

0

9

0

Context API vs Zustand 그리고 Auth

0

17

2

장치 의존성과 CSR

0

22

1

순수 함수 / 순수 컴포넌트

0

14

1

스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여

0

159

1

vscode에서 svg파일 불러오기 질문

0

3990

1

모바일 화면 최적화 방법 질문드립니다!

0

255

1

key.svg 이미지

1

233

1

Vue.js 적용 방법

0

308

1

강사님 vscode 폰트와 색상이 뭔가요

0

688

2

web animation api를 통한 apple page

0

524

2

리액트에서 scroll-timeline.js 불러오는 법

0

757

1

특정 시점에 자바스크립트 호출은 어려울까요?

0

347

2

section04 - 각각의 객체에 개별 애니메이션 적용하기

0

502

3

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?

0

776

2

scroll-timeline.js 파일

0

563

1

선생님 Section4에 제목 오타난것같습니다!

0

404

1

keyframeEffect를 찾을 수 없다고 나와요

0

523

1

제이쿼리 animate()와는 다른걸까요?

0

418

1

scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??

0

574

1

넓이를 %로 적용하긴 어려울까요?

0

451

2

scrollTimeline polyfill 에 관해서

0

834

1

아직 강의를 보진 않았는데

2

592

1

이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?

0

1218

2