Умная анимация с кастомными Css-свойствами
Сегодня я расскажу о самых популярных CSS-библиотеках, которые используются для интеграции простых анимаций в проект. После небольшого исследования мы отобрали эти библиотеки, в их числе и такие известные, как Animate.css и AnimeJS:
Больше всего меня поразило то, что некоторые из этих библиотек, особенно CSS, были написаны несколько лет назад. Несмотря на то, что CSS теперь стал более производительным и позволяет нам писать более простой и эффективный код, эти библиотеки кажутся старыми. И лишь немногие люди действительно придают большое значение сложностям, которые они приносят с собой после их подключения в наш проект (особенно если мы должны учитывать их объем и производительность). Например, вопрос, который мы все должны задать себе:
Имеет ли смысл подключать всю библиотеку, если мне нужно только 3 анимации?
Ответ, очевидно, отрицательный, и для уменьшения объема кода, некоторые люди копируют отдельные куски кода и используют их независимо от самой библиотеки. Если вы используете PostCSS, то существует плагин для него, который позволяет вам импортировать keyframes которые вы хотите, когда они вам нужны.
Проблема
Почти все эти библиотеки CSS предоставляют набор классов, которым назначена определенная анимация. Таким образом, чтобы применить анимацию затухания снизу, нам нужно добавить соответствующий класс к элементу HTML, а затем настроить его с помощью CSS.
<progress class="fadeFromBottom"></progress>
.fadeFromBottom {
animation-duration: 2s; /* This may require !important 👀 */
animation-delay: 0.5s;
}
Как легко понять, это означает, что для каждой импортированной анимации существует соответствующий класс CSS (например, для задания направления есть отдельные классы), и для настройки анимации мы должны переопределить код, иногда используя !important. В результате, мы получаем запутанный и неподдерживаемый код.
Как мы можем улучшить этот подход, используя современные инструменты?
Keyframes и кастомные свойства
Одним из последних новшеств, введенных в CSS, являются кастомные css-свойства, ключи назначенные разработчиком, которым вы можете присвоить значение, и затем использовать его в коде повторно.
Вы знаете как работают переменные в любом языке программирования? Отлично, кастомные свойства, также называемые css-переменными, очень на них похожи.
Ниже приведен пример локальной переменной, объявленной в селекторе:
.MyComponent {
--foregroundColor: DodgerBlue;
color: var(--foregroundColor, SlateBlue);
}
Мы знаем, что переменные подчиняются каскаду стилей Css и поэтому доступны элементам по убыванию. Давайте теперь попробуем представить возможности, которые мы имеем сегодня, объединив эту функциональность с keyframes-анимацией.
Давайте мы сделаем ту же анимацию, что и выше, где выполняется анимация затухания, но без определенного направления:
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
У нас есть простая анимация, и теперь мы можем попытаться добавить кастомные свойства, чтобы сделать ее более динамичной и иметь возможность настраивать ее без перезаписи кода или создания дополнительных классов:
@keyframes fade {
from {
opacity: var(--fromOpacity, 0);
transform: translate(
var(--fromX, 0),
var(--fromY, 0)
);
}
to {
opacity: var(--toOpacity, 1);
transform: none;
}
}
Добавив несколько кастомных свойств, мы создали анимацию без определенного направления (по умолчанию элемент не перемещается), но теперь мы можем каждый раз изменять это поведение, просто меняя значение кастомных свойств:
.MyComponent {
--fromX: 50px;
--fromOpacity: 1;
--toOpacity: 0;
animation: fade 1s 1;
}
See the Pen
Smart animations with custom properties by Odinokun (@Odinokun)
on CodePen.
Таким образом, нет необходимости указывать CSS класс для каждого направления, и, прежде всего, их можно настраивать, не переписывая CSS и не дублируя код. Можете ли вы вообразить себе библиотеку CSS анимации, которая использует умные keyframes и которая выводит на новый уровень то, что годами было «обязательным»?
Очевидно, что всегда есть “за” и “против”, поэтому очень важно оценить каждый вариант использования, чтобы получить максимальную отдачу от технологии, которую мы решили использовать.
