Умная анимация с помощью пользовательских свойств

Умная анимация с помощью пользовательских свойств

От автора: несколько дней назад я разговаривал с другом о самых популярных библиотеках CSS для интеграции в проект простых анимаций. После небольшого исследования появились эти названия, в том числе самые популярные Animate.css и AnimeJS.

Список популярных библиотек CSS для интеграции в проект простых анимаций:

animate.css

animejs

magic animations

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

hover

anijs

Больше всего меня поразило то, что некоторые из этих библиотек, особенно CSS, были представлены несколько лет назад. Хотя CSS теперь позволяет нам находить лучшие решения и писать более простой и эффективный код, эти библиотеки кажутся вечными (вы помните jQuery?), и лишь немногие люди действительно придают большое значение сложностям, которые они приносят после включения в проект; особенно если мы должны учитывать байты и производительность. Например, вопрос, который мы все должны задать себе:

Имеет ли смысл включать всю библиотеку, если мне нужно только 3 анимации?

Ответ, очевидно, отрицательный, и для преодоления этого некоторые люди «копируют» отдельные ключевые кадры и используют их независимо от самой библиотеки. Если вы используете PostCSS (а вы должны использовать), существует плагин, который позволяет условно импортировать ключевые кадры, которые вам нужны, когда они вам нужны.

Проблема

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

Как легко понять, это означает, что для каждой импортированной анимации (например, направление управляется с помощью другого класса) существует соответствующий класс CSS, и для его настройки мы должны перезаписать код, иногда используя ключевое слово !important (!!), в результате чего получается не так много масштабируемого кода.

Как мы можем изменить этот подход, используя современные инструменты?

Ключевые кадры и пользовательские свойства

Одним из недавних нововведений в CSS являются пользовательские свойства, ключи, определенные разработчиком, вы можете присвоить им значение, которое затем будет повторно использовано в коде. Вы знаете, как работают переменные в любом другом языке? Хорошо, пользовательские свойства, также называемые переменными CSS, похожи на них. Ниже приведен пример локальной переменной, объявленной в селекторе:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы знаем, что переменные следуют Каскаду и поэтому доступны по убыванию элементов. Давайте теперь попробуем представить возможности, которые мы имеем сегодня, объединив этот функционал с анимацией ключевых кадров. Теперь мы определим ту же анимацию, что и в примере выше с анимацией затухания, но без определенного направления:

У нас есть простая анимация, и теперь мы можем попытаться добавить пользовательские свойства, чтобы сделать ее более динамичной и иметь возможность настраивать ее без перезаписи кода или создания дополнительных классов:

Добавив некоторые пользовательские свойства, мы создали анимацию без определенного направления (по умолчанию элемент не перемещается), но теперь мы можем каждый раз изменять это поведение, просто изменяя значение пользовательских свойств:

Таким образом, нет необходимости указывать класс CSS для каждого направления, и, прежде всего, их можно настраивать, не переписывая CSS и не дублируя код. Можете ли вы представить библиотеку анимации CSS, использующую умные ключевые кадры, которая выводит на новый уровень то, что годами было «обязательным»?

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

Источник: https://equinusocio.dev

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий