Советы по оптимизации теневой анимации CSS

внешний интерфейс CSS
Советы по оптимизации теневой анимации CSS

Этот совет исходит из этой статьи -How to animate box-shadow with silky smooth performance

Эта статья не является дословным переводом, потому что я считаю эту технику очень интересной и полезной, поэтому написала статью.

box-shadowВ нашей работе используется все больше и больше, анимация, сопровождающая тень, более-менее немного. Предположим, у нас есть следующий ящик:

div {
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

Когда я хочу навести курсор, тень окна меняется сbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)Переход кbox-shadow: 0 5px 15px rgba(0, 0, 0, 0.3).

  • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

ОК, самый простой способ, конечно:

div:hover {
    width: 100px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

Поскольку анимация перехода происходит в двух разных состояниях тени блока, браузер будет постоянно перерисовывать тень блока во время анимации перехода. И поскольку тень — это стиль, интенсивно использующий производительность, эта анимация кажется несколько застрявшей.

Вот небольшой трюк, чтобы оптимизировать анимацию теней в этом случае.

Оптимизировано с помощью псевдоэлементов и прозрачности

Используя псевдоэлементы и прозрачность для оптимизации, мы добавляем к вышеприведенному элементу псевдоэлемент before, размер такой же, как у родительского div, и добавляем к этому элементу заранее требуемое финальное состояние тени блока, но прозрачность элемент равен 0.

div {
    position: relative;
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
}

Затем при наведении нам просто нужно установить непрозрачность псевдоэлемента от 0 до 1.

div:hover::before {
    opacity: 1;
}

Преимущество этого в том, что фактическое изменение тени на самом деле является только изменением прозрачности, без постоянной перерисовки тени, что эффективно улучшает плавность анимации теней и делает ее более плавной.

bshadow

Почему прозрачностьopacityАнимируйте, чтобы сравнитьbox-shadowКак насчет лучшей производительности для анимации? Вы можете взглянуть на эту таблицу здесь, в которой перечислены эффекты различных преобразований атрибутов при переупорядочении и перерисовке страницы:

image

very few CSS properties

Наконец, демо может увидеть:

Демонстрация CodePen — оптимизируйте анимацию тени блока

Проблемы, другое решение

Приведенная выше схема в исходном тексте на самом деле не идеальна, потому что окончательный эффект — это наложение двух теней, что может сделать цвет тени немного темнее в общем ощущении.

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

Конечно, мы можем еще раз оптимизировать приведенную выше схему, воспользуемся другим::afterпсевдоэлемент,::afterПсевдоэлемент устанавливается в исходное состояние с прозрачностью 1,::beforeПсевдоэлемент устанавливается в конечное состояние с прозрачностью 0:

div {
    position: relative;
    width: 100px;
    height: 100px;
}

div::before {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
}

div::after {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

При фактическом наведении два псевдоэлемента отображаются и скрываются, так что конечный эффект имеет только один эффект тени, и нет наложения теней, что согласуется с эффектом прямого перехода тени:

div:hover::before {
    opacity: 1;
}

div:hover::after {
    opacity: 0;
}

bshadow2

Демонстрация CodePen — оптимизируйте анимацию тени блока

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

Категории