Задержка перехода
В SIMAI Framework с помощью модифкаторов можно управлять задержкой переходов CSS.
Классы
| Класс | Значение |
|---|---|
delay-1 |
transition-delay: 75ms;
|
delay-2 |
transition-delay: 100ms;
|
delay-3 |
transition-delay: 150ms;
|
delay-4 |
transition-delay: 200ms;
|
delay-5 |
transition-delay: 300ms;
|
delay-6 |
transition-delay: 500ms;
|
delay-7 |
transition-delay: 700ms;
|
delay-8 |
transition-delay: 1s;
|
delay-9 |
transition-delay: 2s;
|
delay-0 |
transition-delay: 0s;
|
Описание
Адаптивный модификатор. Задает задержкой перехода в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
delay-3
Кнопка А
delay-5
Кнопка Б
delay-7
Кнопка В
<button class="transition duration-3 ease-in-out delay-3 ...">Кнопка A</button>
<button class="transition duration-5 ease-in-out delay-5 ...">Кнопка Б</button>
<button class="transition duration-7 ease-in-out delay-7 ...">Кнопка В</button>Адаптивность
Для управления задержкой перехода, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:delay-3 для установки задержки перехода в 150ms для экранов размером Medium и больше.
<div class="md:delay-3 ..."></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.