React로 시작하는 js+css 애니메이션 개론

개시하다

Shift BRAIN이 디자인한 페이지가 굉장히 좋네요.
https://shiftbrain.com/
BtoB의 01단계 제품 관리 화면에는 이런 신과 같은 품질이 필요하지 않은 분들이 많은데, 어렵게 UI 제작에 참여했다면 한두 편의 애니메이션을 설치하고 싶겠죠.
이번에 개발 중인 제품에 애니메이션(Shift BRAIN 같은 신 UI가 아님)을 몇 개 넣을 기회가 있어서 그 당시의 학습을 간단한 애니메이션 개론으로 보도했습니다.
리액션 애니메이션에 첫발을 내딛는 계기가 된다면!

글의 목표

리액트에서 애니메이션의 첫발을 내딛고 싶은 사람

손끝 기교와 표현력으로 격차를 벌리려는 당신

컨디션

package.제이슨이 되다

실제 코드

(필자는tailwindcss에 걸렸기 때문에tailwindcss를 사용한다)
https://github.com/nus3/inside-podcast/tree/main/src/components/examples/Example
만들어진 것

transition+js 애니메이션 사용하기

transition 속성이 지정한 css의class를className에 부여하는 요소hover 또는 onClick 등 트리거 이벤트에 transition에서 지정한 스타일 변경 후의class를 이 요소에 부여하여 애니메이션화하는 방법
아래의 실례를 보면 알겠지만, 간단한 운동을 하려면 상당히 간단하다
css에서 transition: height 0.2s; 애니메이션을 위한 속성을 지정하였으며, onClick 에서 class Name에 class가 변경한 Height의 class를 넣었습니다.

classnames(styles["content1"], {
  [styles.high]: high,
});

설치 예
index.module.css

/* postcssの`postcss-nested`使ってscssのようにネストして書けるようにしてやす */
.content1 {
  transition: height 0.2s;
  height: 40px;

  &.high {
    height: 300px;
  }
}

export const Example = (): JSX.Element => {
  const [high, setHigh] = useState<boolean>(false);

  return (
    <div>
      <div className="mb-6">
        <Button
          color="primary"
          label="click me!"
          labelSize="sm"
          onClick={() => setHigh(!high)}
          rounded
        />
      </div>
      <div
        className={classnames(styles["content1"], {
          [styles.high]: high,
        })}
      >
        <Text color="white">content1</Text>
      </div>
    </div>
  );
};

@keyframs+animation 속성을 사용한 애니메이션

transition+js 애니메이션을 사용하면width,height,색상변화 등(또는 조합이라고) 간단한 애니메이션은 가능하지만 この要素を下に動かした後に回転してそこから右に動かしたりもできますよね?라고 불리면 귀찮아요.
이럴 때는 @keyframes랑animation プロパティ 쓰세요.
css@keyframes로 요소 0에서 100의 상태를 정의합니다
0부터 100까지의 상태는 쉽게 말하면 요소가 0초면 하이라이트가 0, 1초면... (이하 중복), 마지막 5초면 하이라이트가 100px인 상태.@keyframes에서 정의된 원소 0에서 100의 상태는 animation プロパティ에서 사용

/* 0の位置からy軸に200px動くことが書かれてる */
@keyframes moveDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(200px);
  }
}

.content3 {
  animation-name: moveDown; /* moveDownって名前のkeyframes使うよ */
  animation-duration: 1s; /* 0から100にいくまでの時間は1秒だよ */
  animation-timing-function: ease-in; /* 0から100までどんな感じに動かしたいんだい */
  animation-iteration-count: infinite; /* アニメーションは繰り返すのかい */
  animation-fill-mode: forwards; /* アニメーションが始まる前と終わった後の状態はどうすんだい */
}

이건 맞아요.
@keyframes의 지정은 from to뿐만 아니라 백분율도 지정할 수 있습니다.

/* アニメーションが0%の時は角度が0度で10%の時は角度が10度で・・・以下略 */
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.content5 {
  animation-name: swing;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* アニメーションはどの方向で再生するんだい */
}

이건 맞아요.

최후

translate 2D 뿐만 아니라 3Dtranslate3d 및 translateY도 지정할 수 있습니다.
네, 눈치챘을 수도 있어요. 여기까지 읽은 당신은 CSS 애니메이션의 심연 입구에 서 있어요.
Let's enjoy css animation!!
이전에 창작한 작품들을 좀 더 첨가하다