От автора: несколько дней назад я разговаривал с другом о самых популярных библиотеках CSS для интеграции в проект простых анимаций. После небольшого исследования появились эти названия, в том числе самые популярные Animate.css и AnimeJS.
Список популярных библиотек CSS для интеграции в проект простых анимаций:
Больше всего меня поразило то, что некоторые из этих библиотек, особенно CSS, были представлены несколько лет назад. Хотя CSS теперь позволяет нам находить лучшие решения и писать более простой и эффективный код, эти библиотеки кажутся вечными (вы помните jQuery?), и лишь немногие люди действительно придают большое значение сложностям, которые они приносят после включения в проект; особенно если мы должны учитывать байты и производительность. Например, вопрос, который мы все должны задать себе:
Имеет ли смысл включать всю библиотеку, если мне нужно только 3 анимации?
Ответ, очевидно, отрицательный, и для преодоления этого некоторые люди «копируют» отдельные ключевые кадры и используют их независимо от самой библиотеки. Если вы используете PostCSS (а вы должны использовать), существует плагин, который позволяет условно импортировать ключевые кадры, которые вам нужны, когда они вам нужны.
Проблема
Почти все эти библиотеки CSS предоставляют набор классов, которым назначена определенная анимация. Итак, чтобы применить анимацию затухания снизу, нам нужно добавить относительный класс к элементу HTML, а затем настроить его с помощью CSS:
<progress class="fadeFromBottom"></progress> <style> .fadeFromBottom { animation-duration: 2s; /* This may require !important */ animation-delay: 0.5s; }
</style>Как легко понять, это означает, что для каждой импортированной анимации (например, направление управляется с помощью другого класса) существует соответствующий класс CSS, и для его настройки мы должны перезаписать код, иногда используя ключевое слово !important (!!), в результате чего получается не так много масштабируемого кода.
Как мы можем изменить этот подход, используя современные инструменты?
Ключевые кадры и пользовательские свойства
Одним из недавних нововведений в CSS являются пользовательские свойства, ключи, определенные разработчиком, вы можете присвоить им значение, которое затем будет повторно использовано в коде. Вы знаете, как работают переменные в любом другом языке? Хорошо, пользовательские свойства, также называемые переменными CSS, похожи на них. Ниже приведен пример локальной переменной, объявленной в селекторе:
.MyComponent { --foregroundColor: DodgerBlue; color: var(--foregroundColor, SlateBlue);
}Мы знаем, что переменные следуют Каскаду и поэтому доступны по убыванию элементов. Давайте теперь попробуем представить возможности, которые мы имеем сегодня, объединив этот функционал с анимацией ключевых кадров. Теперь мы определим ту же анимацию, что и в примере выше с анимацией затухания, но без определенного направления:
@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;
}Таким образом, нет необходимости указывать класс CSS для каждого направления, и, прежде всего, их можно настраивать, не переписывая CSS и не дублируя код. Можете ли вы представить библиотеку анимации CSS, использующую умные ключевые кадры, которая выводит на новый уровень то, что годами было «обязательным»?
Очевидно, что всегда есть за и против, поэтому очень важно хорошо оценить каждый вариант использования, чтобы получить максимальную отдачу от технологии, которую мы решили использовать.
Источник: https://equinusocio.dev
Редакция: Команда webformyself.