USS переходы фильтра

Переходы фильтра USS следуют синтаксису перехода фильтра CSS, обеспечивая плавные визуальные эффекты, основанные на свойствах фильтра.

Соответствующие функции фильтра

Для плавного перехода функции фильтра в обоих состояниях должны точно соответствовать друг другу, включая порядок и тип функций.

Следующий пример создает плавный переход между двумя состояниями с соответствующими функциями фильтров. Когда вы указываете на элемент, функции blur и invert переходят плавно.

.effect {
    filter: blur(0px) invert(0%);
}

.effect:hover {
    filter: blur(10px) invert(100%);
}

Частичное совпадение функций фильтров

Когда функции фильтров частично совпадают, система интерполирует общие функции и применяет новые. Например, в следующем примере переходы между функциями blur и invert.

.effect {
    filter: blur(0px); /* invert(0%) */
}

.effect:hover {
    filter: blur(10px) invert(100%);
}

В этом примере система заполняет исходный фильтр функцией invert, используя значение интерполяции по умолчанию (0%). При создании пользовательского фильтра можно указать значение интерполяции в определении ассета.

Несоответствующие функции фильтров

Если функции фильтра не совпадают по типу или порядку, как показано в следующем примере, переходя от invert() и blur() к blur() и invert(), интерполяция не выполняется. Вместо этого переход резко меняется на новое состояние фильтра.

.effect {
    filter: invert(0%) blur(0px);
}

.effect:hover {
    filter: blur(10px) invert(100%);
}