Анимации и переходы
uStatic CSS включает набор утилитарных классов для анимаций и переходов.
Анимации
Blink
Мигание элемента:
Мигающий текст
html
<div class="blink">Мигающий текст</div>Spin
Вращение элемента. Доступно от 1 до 10 (умножается на 0.25с):
⚙️
html
<div class="animation:spin-4">⚙️</div>Pulse
Пульсация при нажатии (используется с :active):
html
<button class="active:pulse">Нажми меня</button>Переходы (Transitions)
Fade
Плавное появление/исчезновение. Классы для Vue Transition:
html
<transition name="fade" mode="out-in">
<div v-if="visible">Контент</div>
</transition>Классы:
.fade-enter-active,.fade-leave-active— transition.fade-enter-from,.fade-leave-to— невидимое состояние (opacity: 0).fade-enter-to,.fade-leave-from— видимое состояние (opacity: 1)
Slide Up
Выезд элемента снизу:
html
<transition name="slide-up">
<div v-if="visible">Контент</div>
</transition>Классы:
.slide-up-enter-active,.slide-up-leave-active— transition.slide-up-enter-from— невидимое состояние со смещением вниз.slide-up-leave-to— невидимое состояние со смещением вверх
Scale
Масштабирование элемента:
html
<transition name="scale">
<div v-if="visible">Контент</div>
</transition>Классы:
.scale-enter-active,.scale-leave-active— transition.scale-enter-from,.scale-leave-to— невидимое состояние с уменьшением (scale: 0.95)
Утилитарные классы
Hover Lift
Подъём элемента при наведении:
Наведи на меня
html
<div class="hover-lift">Наведи на меня</div>Эффект: при наведении элемент поднимается вверх с тенью.
Tooltip Visibility
Классы для управления видимостью tooltip:
Наведи на меня
Подсказка
html
<div class="tooltip-hidden">Скрытый tooltip</div>
<div class="tooltip-visible">Видимый tooltip</div>Классы:
.tooltip-hidden— скрытое состояние (opacity: 0, visibility: hidden).tooltip-visible— видимое состояние (opacity: 1, visibility: visible)
Примеры использования
Анимация загрузки
Загрузка...
Интерактивная карточка
Карточка
Наведи на меня для эффекта подъёма
Уведомление с анимацией
✓ Успешно выполнено