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

<Meta title='@dxtmisha/ru/scripts/Classes/StylesToAnimate - Генератор анимаций'/>

# Класс StylesToAnimate

Класс `StylesToAnimate` отвечает за создание CSS-анимаций `@keyframes` на основе свойств дизайна. Он реализует логику для обертывания вложенных правил ключевых кадров в именованный блок анимации.

## Ключевые возможности

- **Обертка Keyframes** — Автоматически оборачивает созданный контент стилей в блок `@keyframes`.
- **Динамическое именование** — Использует имя свойства дизайна для определения идентификатора анимации.
- **Управление отступами** — Корректно обрабатывает отступы блоков и необязательные начальные пустые строки.

## Инициализация

Инициализируйте преобразователь `StylesToAnimate` с помощью необходимого свойства и функции контента для шагов анимации.

**Параметры:**
- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
- `space: string` — строка отступа (например, `"  "` или `"\t"`).
- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих ключевые кадры.
- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).

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

// Использование в логике преобразования
const converter = new StylesToAnimate(property, '  ', contentCallable)
const result = converter.make()
```

## Методы

### Управление

- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.

