JavaScript(jQuery) 애니메이션을 사용할 때 "처음"과 "마지막"두 가지 상태를 만들면 됩니다.

개시하다

나는 자바스크립트로 애니메이션을 만드는 데 까다로운 사람들을 대상으로 썼다.
나는 자바스크립트로 애니메이션을 만드는 방법을 처음 배웠을 때 잘하지 못한다는 의식을 가지고 있었다.실현하고자 하는 애니메이션에 관해서 나는 인기 있는 페이지에서 코드를 복제하여 약간 조정하여 분위기 속에서 돌아가고 있다.
하지만 어떤 생각을 터득하고 나니 잘 못 한다는 의식이 조금 줄었다.
그것은'최초'와'마지막'의 두 가지 상태를 창조하면 된다는 것이다.

애니메이션에는 처음과 마지막 두 가지 상태가 필요합니다.

애니메이션에는 처음과 마지막 두 가지 상태가 필요합니다.
나는 이런 생각이 있는지에 따라 애니메이션을 만들 때의 사고가 크게 달라질 것이라고 생각한다.
예를 들어, 요소를 클릭하면 클릭한 요소를 45도 회전시키는 애니메이션을 만들 수 있습니다.이를 위해서는 회전 전 상태와 45도 회전 후의 상태라는 두 가지 상태를 미리 준비해야 한다.

자바스크립트로 애니메이션을 만들기 위해 CSS에서'최초'와'마지막'의 상태를 미리 만들고 자바스크립트로 클래스 추가 및 삭제

JavaScript를 사용하여 애니메이션을 만들려면 CSS에서 "처음"및 "마지막"상태를 미리 만들고 클래스의 추가 및 삭제를 JavaScript로 수행합니다.
애니메이션의 제작 순서는 다음과 같다.

CSS를 사용하려면

애니메이션할 요소의 첫 번째 상태 만들기

애니메이션할 요소에 대한transition

지정

애니메이션할 요소에 클래스 추가

추가된 클래스에서 원래 CSS를 덮어쓰고 애니메이션할 요소의 마지막 상태를 만듭니다

.

JavaScript를 사용하려면

애니메이션할 요소 가져오기

애니메이션을 시작하고 싶은 것을 선택

애니메이션할 요소에 클래스 추가

CSS를 사용하려면

애니메이션할 요소의 첫 번째 상태 만들기

우선 애니메이션화하고 싶은 요소의 최초 상태를 만든다.
그러나 애니메이션을 넣을 때 이 절차는 기본적으로 이미 완성되었다.애니메이션을 넣을 시기는 디자인 데이터가 완성된 후일 수 있다고 생각했기 때문이다.먼저 디자인 데이터의 실현을 한 다음에'이곳에서 이런 애니메이션을 만들고 싶다'고 발전하는 경우가 많다.
이 글에서 디자인 데이터를 완성한 상태는'애니메이션 요소의 첫 번째 상태'로 이미 완성된 전제에서 진행된다.
이번에는 다음 HTML 및 CSS를 애니메이션 요소의 초기 상태로 사용합니다.

<div class="kurukuru"></div>

.kurukuru {
  width: 100px;
  height: 100px;
  backgroud-color: red;
}

애니메이션할 요소의 transition 지정하기

transsition은 좋은 애니메이션의 시작과 마지막 상태를 느끼게 하는 CSS입니다.지정한 요소는 애니메이션 스타일이 바뀔 때 애니메이션이 바뀝니다.

  .kurukuru {
    width: 100px;
    height: 100px;
    backgroud-color: red;
+   transition: transform 0.4s;
  }

애니메이션할 요소에 클래스 추가

그런 다음 애니메이션할 요소에 클래스를 추가합니다.애니메이션에 is-active 클래스를 추가합니다.is-active 클래스에서 다음 단계의 애니메이션 후 CSS를 지정합니다.

- <div class="kurukuru"></div>
+ <div class="kurukuru is-active"></div>

추가된 클래스에서 원래 CSS를 덮어쓰고 애니메이션할 요소의 마지막 상태를 만듭니다.

추가된 is-active 클래스의 경우 원래 CSS를 덮어쓰는 형식으로 애니메이션이 끝난 후의 상태를 만듭니다.
CSS를 작성하면서 브라우저로 확인하는 것이 좋습니다.
최종적으로 이 is-active반은 자바스크립트로 추가되었습니다.

  .kurukuru {
    width: 100px;
    height: 100px;
    backgroud-color: red;
    transition: transform 0.4s;
  }
+
+ .kurukuru.is-active {
+   transform: rotate(45deg);
+ }

이렇게 되면'최초'와'마지막'두 가지 상태가 형성된다.

is-active가 없을 때 회전 전 상태(최초)

is-active 시 회전한 상태(마지막)

위에서 설명한 대로 CSS는 완료되어야 합니다.
여기까지는 먼저 크롬의 검증 모드로 수동으로 클래스를 추가하고 삭제할 수 있다.

JavaScript를 사용하려면

애니메이션할 요소 가져오기

JavaScript로 HTML의 요소를 조작하려면 먼저 조작하고 싶은 요소를 얻어야 한다.대부분의 경우 요소 유형명을 목표로 한다.

// jQueryならこんな感じ
+ $(".kurukuru");

// JavaScriptならこんな感じ
+ document.querySelector(".kurukuru");

사실 자바스크립트로만 취득하기 위해 준비한 반이 더 좋을 것 같지만, 최대한 간단하게 하려고 이번에는 사지 않겠습니다.

무슨 일이 일어났는지 선택하고 애니메이션을 시작하고 싶어요.

JavaScript에는 활동이 있습니다.이것이 바로 왜 촉발(계기, 신호)해야 하는가.JavaScript 측에서 활동을 준비했습니다.

클릭 후~

스크롤 후~

화면 읽기 후~

잠깐만요.내가 쓰고 싶은 이벤트를 찾아서 그걸 썼어.
여기서 클릭 이벤트, 즉'클릭 후'를 사용할 것입니다.

// jQueryならこんな感じ
- $(".kurukuru");
+ $(".kurukuru").click(function(){
+   // あとで処理を書くところ
+ });

// JavaScriptならこんな感じ
- document.querySelector(".kurukuru");
+ document.querySelector(".kurukuru").addEventListener("click", function(){
+   // あとで処理を書くところ
+ });

이벤트가 발생한 후 애니메이션 요소에 클래스 추가

마지막으로 애니메이션할 요소에 클래스를 추가합니다.
추가할 클래스는 CSS 프로그램에서 애니메이션이 끝난 후의 상태를 지정하는 클래스입니다.그래서 추가 is-active 같은 처리를 기술하겠습니다.

// jQueryならこんな感じ
  $(".kurukuru").click(function(){
+   $(".kurukuru").addClass("is-active");
  });

// JavaScriptならこんな感じ
  document.querySelector(".kurukuru").addEventListener("click", function(){
+   document.querySelector(".kurukuru").classList.add("is-active");
  });

※ 가능한 한 많은 사람이 이해할 수 있도록 불필요한 코드로 여겨지는 부분이 있을 수 있으니 놓치지 마세요.

애니메이션을 할 수 있는지 확인을 해볼게요.

위 단계를 완료하면 45도 회전 애니메이션을 완료해야 합니다.
아래의 빨간색 직사각형을 눌러 주세요.

총결산

나는 이 글에서 열거한 예가 비교적 간단하다고 생각한다.그래서 실제로는 좀 더 복잡하게 처리해야 할 상황이 있다.
그러나 애니메이션을 만드는 최초와 마지막이 중요하다는 것을 깨닫는 것만으로도 애니메이션에 대한 불능 의식을 줄일 수 있다고 생각합니다.
인터넷뿐만 아니라 애니메이션 제작과 Powerpo 애니메이션에서도 활용할 수 있다는 생각은 반드시 주의해 주십시오.