Создание анимации с помощью Animate.css
Development | Комментировать запись
Анимация может как улучшить пользовательский интерфейс вашего приложения, так и испортить его. В CSS анимацию можно создавать вручную с помощью стандартного CSS3, но это решение требует серьезного обслуживания и тщательной настройки. Альтернативное средство для создания анимации – Animate.css, библиотека готовых к использованию кросс-браузерной анимации, которая работает по принципу «просто добавь воды». Это быстрое и эффективное решение, которое стоит попробовать.
В этом мануале мы создадим небольшое приложение со списком задач на Javascript, а затем попробуем анимировать различные его элементы. Чтобы продемонстрировать, как Animate.css может улучшить ваш рабочий процесс, мы сначала анимируем один элемент с помощью стандартного CSS3, а затем сделаем то же самое через Animate.css. После этого мы добавим несколько других вариантов анимации из обширной библиотеки Animate.css.
Требования
- Любой редактор кода, например nano или Visual Studio Code.
- Веб-браузер
- Знакомство с основами HTML. Чтобы освежить свои знания, просмотрите серию учебных руководств «Как создать веб-сайт с помощью HTML».
1: Создание тестового приложения
Прежде чем мы рассмотрим, как использовать библиотеку Animate.css, давайте создадим небольшое тестовое приложение для ведения списка дел. Затем мы напишем анимацию fadeIn, используя стандартный CSS3.
Сначала создайте новую папку для тестового проекта:
mkdir animate-css-example
А затем перейдите в нее:
cd animate-css-example
Здесь мы создадим три файла: index.html, app.js и style.css.
Используйте nano или любой другой редактор кода, чтобы создать первый файл по имени index.html:
nano index.html
Добавьте следующие строки, которые создают краткий HTML-документ со ссылками на файлы CSS и Javascript:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Animations</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <input type="text" id="todoInput"> <button onclick="addTodo()">Add Todo</button> </div> <ul> </ul> <script src="app.js"></script> </body> </html>
В этом файле мы определили заголовок CSS Animations, а также связали файл с таблицей стилей CSS (которую мы сделаем чуть позже). Затем мы определяем некоторые объекты Javascript внутри тега <div> и ссылаемся на третий файл, app.js.
Сохраните и закройте файл.
Теперь создайте файл style.css в своем редакторе:
nano style.css
Добавьте следующий контент, который определит анимацию fadeIn:
.fadeIn {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Мы определили продолжительность анимации и использовали правило @keyframes для настройки цикла анимации.
Сохраните и закройте файл.
Теперь создадим наш последний файл по имени app.js:
nano app.js
Добавьте в файл следующий контент. Эти строки определяют функцию addTodo и встраивают анимацию:
const addTodo = () => {
const ul = document.getElementsByTagName('ul')[0];
const input = document.getElementById('todoInput').value;
if (input.length > 0) {
const li = document.createElement('li');
li.classList.add('fadeIn');
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
document.getElementById('todoInput').value = '';
}
};
Итак, в приложении Todo есть текстовое поле и кнопка. Когда мы вводим текст в поле и нажимаем эту кнопку, приложение создает новый элемент и добавляет к нему наш текст. Обратите внимание на выделенную строку. Она присваивает класс fadeIn каждому новому элементу.
Сохраните и закройте файл.
Теперь откройте браузер и загрузите index.html. На экране появится поле и кнопка. Напишите текст в поле и нажмите Add Todo. Ваша новая задача исчезнет из строки и появится в списке.
Если у вас получилось именно это – поздравляем, вы успешно применили анимацию к элементу, используя стандартный CSS3. Теперь давайте перепишем наш код для поддержки Animate.css и посмотрим, как это может улучшить его производительность и читабельность. После этого мы изучим еще несколько вариантов анимации, которые можно найти в этой библиотеке.
2: Использование библиотеки Animate.css
На этом этапе мы перепишем наш код с помощью Animate.css, а затем рассмотрим некоторые дополнительные варианты анимации.
Во-первых, нужно установить библиотеку Animate.css. Мы можем сделать это с помощью CDN или сети доставки контента.
Читайте также: Ускорение доставки статического контента с помощью CDN
Снова откройте файл index.html в своем редакторе:
nano index.html
Внутри тега <head> удалите существующий тег <link> для style.css и замените его выделенным кодом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Animations</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<div>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add Todo</button>
</div>
<ul>
</ul>
<script src="app.js"></script>
</body>
</html>
Теперь в теге <link> используется официальная ссылка Animate.css, что позволяет нам добавить данную библиотеку прямо на страницу нашего приложения.
Примечание: Вы также можете установить библиотеку с помощью менеджера пакетов npm или yarn.
Чтобы установить библиотеку с помощью npm, используйте эту команду:
npm install animate.css
Если вы хотите установить библиотеку с помощью yarn, введите такую команду:
yarn add animate.css
Сохраните и закройте index.html.
Теперь давайте перепишем и Javascript, чтобы применить анимацию fadeIn с помощью Animate.css.
Каждый класс в библиотеке Animate.css использует префикс animate__. Сначала мы должны добавить animate__animated. Так элементы узнают, что они должны использовать библиотеку Animate.css. Затем мы добавим animate__specific_animation. Другие доступные опции вы можете просмотреть на официальном сайте библиотеки.
Итак, в нашем примере мы добавим animate__animated, а затем animate__fadeIn в classList, чтобы каждый новый элемент списка появлялся постепенно.
Внесите в свой код следующие выделенные изменения. Окончательный вариант кода имеет такой вид:
const addTodo = () => {
const ul = document.getElementsByTagName('ul')[0];
const input = document.getElementById('todoInput').value;
if (input.length > 0) {
const li = document.createElement('li');
const animations = [
'animate__animated',
'animate__fadeIn'
];
li.classList.add(...animations);
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
document.getElementById('todoInput').value = '';
}
};
Мы создали константу, которая включает классы Animate.css, а затем заменили fadeIn этой константой.
Сохраните и закройте файл.
Теперь перезагрузите браузер. Стиль fadeIn по-прежнему будет отображаться, только теперь эффект написан с помощью библиотеки Animate.css.
Написанная с помощью Animate.css анимация быстро работает и делает код более удобным. Чтобы продемонстрировать это, давайте добавим еще несколько анимированных элементов в тег <body>. Откройте index.html в своем редакторе:
nano index.html
Предположим, мы хотим, чтобы каждый элемент внутри DOM увеличивался, когда пользователь загружает страницу, и чтобы эта анимация повторялась три раза. Все, что нам нужно сделать, это добавить в наш код классы animated__animate, animated__zoomIn и animated__repeat.
Добавьте эти три класса в тег <body>:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Animations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body class="animate__animated animate__zoomIn animate__repeat-3"> <div> <input type="text" id="todoInput"> <button onclick="addTodo()">Add Todo</button> </div> <ul> </ul> <script src="app.js"></script> </body> </html>
Сохраните и закройте файл.
Теперь перезагрузите файл index.html в браузере и посмотрите на вашу новую анимацию.
Итак, мы успешно внедрили анимацию CSS в HTML и Javascript с помощью библиотеки Animate.css, и при этом нам не пришлось писать код анимации вручную.
Заключение
Animate.css — это быстрое и эффективное решение для добавления CSS-анимации. Эта библиотека ускорит ваш рабочий процесс и поможет создать более читаемый код. Дополнительную информацию о библиотеке Animate.css можно найти на ее официальном сайте.
Помните: анимация может быстро перегрузить ваш сайт и ухудшить пользовательский опыт. Сайт Animate.css содержит полезные разделы с рекомендациями и разбором ошибок Best Practices и Gotchas). Кроме того, анимация также может оказаться вредной для людей с определенными проблемами со здоровьем. Animate.css поддерживает мультимедийный запрос prefers-reduced-motion, поэтому клиенты могут отключать потенциально опасные виды анимации.
Tags: CSS, CSS3