AnimatedContainer

Flex-контейнер, що під час монтування анімує дочірні елементи ефектом появи знизу.

Живе демо

Горизонтально (рядок)

Елемент 1

Елемент 2

Елемент 3

Вертикально (стовпчик) і зі звуком під час наведення

Елемент 1

Елемент 2 (без звуку)

Елемент 3

Використання

Горизонтальне розміщення (за замовчуванням)

<template>
  <orio-animated-container>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </orio-animated-container>
</template>

Вертикальне розміщення

<template>
  <orio-animated-container direction="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </orio-animated-container>
</template>

Зі звуком під час наведення

<template>
  <orio-animated-container v-slot="{ play }">
    <div @mouseenter="play">Item 1</div>
    <div @mouseenter="play">Item 2</div>
    <div @mouseenter="play">Item 3</div>
  </orio-animated-container>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
direction	"row" | "column"	"row"	Напрямок розміщення контейнера

Слоти

Слот	Пропси	Опис
default	{ play: Function }	Вміст для анімації

Примітки

• Усі прямі дочірні елементи анімуються ефектом появи знизу (0.5s ease-out)
• Дочірні елементи зсуваються з позиції на 30px нижче кінцевої
• Контейнер використовує flex-wrap: wrap для адаптивних макетів
• Відступ між елементами за замовчуванням — 1rem