() translation by (you can also view the original English article)
Многие люди хотят добавить небольшие анимации на свой сайт в ответ на клики или другие действия своих посетителей. Однако не все хорошо разбираются в использовании CSS или JavaScript. Некоторые просто знают, как изменить HTML и отразить изменения на веб-сайте.
Как правило, это та часть, которую разработчики берут на себя и добавляют необходимые JavaScript и CSS, чтобы сделать ваш сайт выделяющимся. Однако, если вы хотите иметь возможность самостоятельно создавать анимированные сайты без написания кода, библиотека AniJS очень поможет.
AniJS позволяет вам создавать анимированный стиль для вашего сайта без написания кода JavaScript или CSS! Вы можете указать все свои анимации из HTML с помощью простого синтаксиса If-On-Do-To.
Установка
Прежде чем вы сможете начать анимацию элементов на своей веб-странице с использованием атрибутов data-anijs, вам необходимо будет включить необходимые файлы. Для доступа ко всем функциям AniJS необходимы три разных файла. Эти файлы представляют собой основную библиотеку JS, файл CSS для анимаций и другой вспомогательный файл JavaScript для использования специального синтаксиса AniJS, такого как $addClass, $toggleClass и $removeClass.
Вы также можете установить библиотеку с помощью Bower, выполнив следующую команду:
1 |
bower install anijs --save |
После того, как вы включили все необходимые файлы, элементы на вашей веб-странице будут готовы к анимации.
Начало работы с синтаксисом AniJS
В своей базовой форме AniJS использует следующий синтаксис для анимации отдельных элементов на основе любого события.
1 |
If (any event happens), On (any element), Do (something like animate, add/remove class), To (this or any other element) |
Здесь часть If указывает событие, которое вызовет манипуляцию анимацией или классом. Параметр On указывает элемент, чьи события должны прослушивать AniJS. Он может отличаться от элемента, на котором вы установили атрибут data-anijs. Часть Do указывает действие, которое нужно предпринять. Здесь вы можете указать имя анимации, которую хотите применить и т. д. Наконец, часть To используется для указания элемента, который необходимо анимировать или которым надо манипулировать.
Часть If необходима для оператора AniJS, который вы добавляете для анимации любого элемента. Параметр On является необязательным, и если значение не используется, используется текущий элемент как значение по умолчанию. Часть Do также необходима, поскольку она сообщает браузеру, что делать, когда указанное событие происходит. Параметр To также является необязательным, и по умолчанию используется текущий элемент, если он не указан.
Вы также можете использовать хуки Before и After, чтобы указать, что должно произойти до и после того, как AniJS делает то, что упоминается внутри части Do.
Анимация различных элементов
AniJS позволяет запускать анимацию, запуская ее на любом соответствующем событии, указанном на странице MDN. Аналогично, вы можете использовать объекты on и to для любого элемента, который вы хотите использовать, с помощью селекторов CSS. Например, вы можете указать, что хотите прослушать событие в div.promotion или в section div p.first и т. д. Часть do может использоваться для указания анимации, которую вы хотите применить к различным элементам. AniJS имеет множество анимаций, которые можно применять к любому элементу, которому вы хотите.
Следующий фрагмент HTML покажет вам, как применять некоторые анимации, которые будут запускаться на определенные события.
1 |
<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div> |
2 |
<div class="pink box" data-anijs="if: click, do: tada animated"></div> |
3 |
<div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div> |
4 |
<div class="purple box" data-anijs="if: mousemove, do: shake animated"></div> |
5 |
<div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div> |
6 |
<div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div> |
7 |
<div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div> |
8 |
<div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div> |
В каждом случае все, что вам нужно сделать, это просто написать инструкции внутри атрибута data-anijs, и библиотека позаботится об остальном. (Мы пропустили часть to во всех этих анимациях, поэтому анимация применяется к элементу, внутри которого мы указали атрибут data-anijs.)
Последние четыре поля имеют разные значения для части on. Это, например, означает, что анимация на зеленом поле будет происходить только тогда, когда мышь перемещается по коричневому ящику. Аналогично, анимация bounce на желтом поле начнет воспроизводиться всякий раз, когда пользователь дважды щелкнет в любом месте body.
Вы можете попробовать эти анимации самостоятельно во встроенной демо-версии CodePen.
Манипулирование классами и элементами HTML
AniJS позволяет вам делать больше, чем просто анимировать разные элементы. Например, вы можете использовать его для добавления, удаления или переключения классов, применяемых к различным элементам. Аналогичным образом вы также можете удалить HTML-элементы или клонировать их, не добавляя ни одной строки JavaScript. Библиотека также позволяет вам перемещаться по DOM с помощью специальных зарезервированных ключевых слов.
Начнем с манипуляций классами. AniJS имеет три зарезервированных ключевых слова для управления классами. Это $addClass, $removeClass и $toggleClass. Как следует из названия, вы можете использовать их для добавления, удаления и переключения одного или нескольких классов элемента соответственно. Все, что вам нужно сделать, это указать имена классов после зарезервированных ключевых слов.
Аналогичным образом вы можете использовать зарезервированные ключевые слова, такие как $parent, $ancestors, $closeest, $find и $children для перемещения по DOM.
Вы можете использовать эти два набора зарезервированных ключевых слов, чтобы сделать что-то вроде добавления определенного класса ко всем дочерним элементам элемента после того, как посетитель дважды щелкнет этот конкретный элемент. Однако, в некоторых случаях может быть неоднозначно понято, каких детей вы имеете в виду. Например, вы могли применить атрибут data-anijs для одного элемента, но установить значение части On для чего-то еще с помощью селекторов CSS. В этой конкретной ситуации AniJS не будет знать, должен ли класс быть добавлен к дочерним элементам, указанным в селекторе CSS, или к элементу, к которому вы применили атрибут data-anijs. В таких случаях вы можете устранить двусмысленность, используя другое зарезервированное ключевое слово, называемое target. Здесь target относится к элементу, указанному в селекторе CSS.
Рассмотрим следующие три примера, в которых AniJS использовался для переключения классов различных элементов:
1 |
<div class="box" |
2 |
data-anijs="if: click, |
3 |
do: $toggleClass orange"></div> |
4 |
|
5 |
<div class="box second" |
6 |
data-anijs="if: click, |
7 |
do: $toggleClass red,
|
8 |
to: $children"> |
9 |
<span class="shells"></span> |
10 |
<!-- Many more span tags -->
|
11 |
<span class="shells"></span> |
12 |
</div>
|
13 |
|
14 |
<div class="box" |
15 |
data-anijs="if: click, |
16 |
on: .shells,
|
17 |
do: $toggleClass yellow,
|
18 |
to: $parent target;
|
19 |
if: click,
|
20 |
on: .shells,
|
21 |
do: $toggleClass yellow,
|
22 |
to: $parent"></div> |
В приведенном выше примере я переформатировал HTML, чтобы было легче читать и видеть, что происходит.
Начнем с первого div. В этом случае мы опустили обе части on и to значения атрибута data-anijs. Поэтому они оба по умолчанию используют текущий div. Если вы попытаетесь щелкнуть по этому конкретному div, он переключит класс orange, который, в свою очередь, изменит поле на оранжевый.
В случае второго div мы говорим AniJS, переключить класс, называемый red, для всех элементов, которые являются дочерними элементами этого конкретного div. Он будет вращать все дочерние span элементы, а также менять их цвет на красный, в это время параметр border-radius станет равен нулю.
Мы предоставили два разных оператора внутри атрибута data-anijs третьего div. Оба этих оператора переключают один и тот же yellow класс. Однако эффекты полностью различаются из-за использования ключевого слова target.
В первом случае мы добавили ключевое слово target после ключевого слова $parent. Это говорит AniJS, что мы хотим переключить класс для родительских элементов, на которые указывает класс shells. Во втором случае мы пропустили ключевое слово target, поэтому AniJS меняет фон родителя текущего div. Поскольку родительский элемент div является самим body, вся страница становится желтой.
Вы можете попробовать понажимать на разные элементы и посмотреть, как они влияют на страницу во встроенной демо-версии CodePen.
Еще одна вещь, заслуживающая внимания, заключается в том, что даже если атрибут data-anijs для третьего блока имеет два оператора, щелчок по самому блоку не имеет никакого эффекта. Это связано с тем, что мы инструктировали Anijs прослушивать события кликов на элементах span с классом shells в обоих случаях.
Другие способы манипулирования HTML
Другой способ манипулирования элементами HTML на веб-странице с помощью AniJS - клонировать или удалять их. Библиотека зарезервировала ключевые слова $remove и $clone, которые скажут ей, хотите ли вы удалить элемент или клонировать его.
Вы можете передать несколько селекторов в $remove, чтобы удалить несколько элементов с веб-страницы. Имейте в виду, что различные селекторы CSS нужно разделить с помощью | ("pipe" символа).
Ключевое слово $clone также принимает два параметра. Первый - это селектор CSS, указывающий на элемент, который вы хотите клонировать. Второй - это число для указания количества копий, которые вы хотите сделать. Например, $clone .shells|10 сделает 10 копий элементов с классом shells и добавит их как дочерние элементы элемента, для которого указан атрибут data-anijs. Если копии должны быть добавлены к другому элементу, вы можете указать AniJS на него, указав соответствующий селектор CSS после to в инструкции AniJS.
Заключение
Цель этого урока заключалась в том, чтобы как можно быстрее начать работу с AniJS. Как вы могли заметить, библиотека очень проста в использовании. Все, что вам нужно сделать, это указать правильные значения атрибутов, и AniJS позаботится обо всем остальном, как смена классов, манипулирование DOM и анимация любых изменений.
Библиотека предлагает множество других функций, которые мы не рассматривали в этом уроке. Вы должны ознакомиться с официальной документацией, чтобы узнать больше о ней и использовать её в полном объеме.
