import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/scripts/Classes/StylesToAnimate - Trình tạo hiệu ứng (Animation)'/>

# Lớp StylesToAnimate

Lớp `StylesToAnimate` chịu trách nhiệm tạo các hiệu ứng CSS `@keyframes` từ các thuộc tính thiết kế. Nó triển khai logic để bao bọc các quy tắc khung hình chính (keyframes) lồng nhau trong một khối animation có tên.

## Các tính năng chính

- **Bao bọc Keyframes** — Tự động bao bọc nội dung style được tạo bên trong một khối `@keyframes`.
- **Đặt tên động** — Sử dụng tên của thuộc tính thiết kế để định nghĩa định danh cho hiệu ứng.
- **Quản lý thụt lề** — Xử lý chính xác thụt lề khối và các dòng trống dẫn đầu tùy chọn.

## Khởi tạo

Khởi tạo trình chuyển đổi `StylesToAnimate` với thuộc tính bắt buộc và một hàm gọi nội dung cho các bước khung hình chính (keyframes).

**Tham số:**
- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các keyframes.
- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).

```typescript
import { StylesToAnimate } from '@dxtmisha/scripts'

// Sử dụng trong logic chuyển đổi
const converter = new StylesToAnimate(property, '  ', contentCallable)
const result = converter.make()
```

## Các phương thức

### Điều khiển

- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.

