애니메이션 스타일

애니메이션 스타일 (Animation Styles)

애니메이션 스타일을 사용해 재사용 가능한 모션 속성을 정의하는 방법을 배워요. 컴포넌트를 애니메이션하는 데 필요한 코드 양을 줄이는 것이 목표입니다.

출처: 문서

본문

개요 (Overview)

애니메이션 스타일은 재사용 가능한 애니메이션 속성을 정의할 수 있게 해 줘요. 컴포넌트를 애니메이션하는 데 필요한 코드 양을 줄이는 것이 목표입니다.

지원되는 애니메이션 스타일은 다음과 같아요.

  • Animation: 애니메이션 구성, 지연(delay), 방향(direction), 지속 시간(duration), 채움 모드(fill mode), 반복 횟수(iteration count), 이름(name), 재생 상태(play state), 타이밍 함수(timing function)

  • Animation range: 애니메이션 범위, 시작(start), 끝(end), 타임라인(timeline)

  • Transform origin: 변환 기준점(transform origin)

애니메이션 스타일 정의하기 (Defining animation styles)

애니메이션 스타일은 defineAnimationStyles 함수로 정의해요.

다음은 애니메이션 스타일의 예시입니다.

import { defineAnimationStyles } from "@chakra-ui/react"

const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: "bounce, fade-in",
      animationDuration: "1s",
      animationTimingFunction: "ease-in-out",
      animationIterationCount: "infinite",
    },
  },
})

내장 애니메이션 스타일 (Built-in animation styles)

Chakra UI는 바로 사용할 수 있는 내장 애니메이션 스타일 세트를 제공해요.

테마 업데이트 (Update the theme)

애니메이션 스타일을 사용하려면 theme 객체를 animationStyles 속성으로 업데이트하세요.

import { createSystem, defineConfig } from "@chakra-ui/react"
import { animationStyles } from "./animation-styles"

const config = defineConfig({
  theme: {
    animationStyles,
  },
})

export default createSystem(defaultConfig, config)

테마를 업데이트한 후 typegen 명령을 실행해 애니메이션 타입을 생성하세요. postinstall, CI, 모노레포에서 typegen을 실행하는 방법은 CLI 문서를 참고해요.

npx @chakra-ui/cli typegen ./theme.ts

이 애니메이션 스타일들은 data-state=open|closed 속성에 매핑되는 _open과 _closed 같은 다른 스타일과 조합할 수 있어요.

<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
>
  This content will fade in
</Box>

더 알아보기 (Learn more)