AniJS: легкая CSS анимация без кодирования

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

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

AniJS позволяет создавать анимированные стили для вашего сайта без JavaScript или CSS-кодирования! Вы можете указать все свои анимации с помощью HTML, используя простой синтаксис If — On — Do — To .

Установка

Прежде чем вы сможете начать анимацию элементов на вашей веб-странице с data-anijs атрибутов data-anijs , вам нужно будет включить необходимые файлы. Для доступа ко всем функциям AniJS необходимы три разных файла. Этими файлами являются базовая библиотека JS , файл CSS для анимации и еще один вспомогательный файл JavaScript для использования специального синтаксиса $addClass , $toggleClass как $addClass , $toggleClass и $removeClass .

Вы также можете установить библиотеку с помощью Bower, выполнив следующую команду:

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

Начало работы с синтаксисом AniJS

В своей основной форме AniJS использует следующий синтаксис для анимации определенных элементов на основе любого события.

Здесь часть If указывает событие, которое запускает анимацию или манипулирование классом. Часть On указывает элемент, события которого AniJS должен слушать. Это может отличаться от элемента, для которого вы установили атрибут data-anijs . Часть Do определяет действие, которое нужно предпринять. Здесь вы можете указать имя анимации, которую вы хотите применить, и т. Д. Наконец, часть To используется для указания элемента, который необходимо анимировать или манипулировать.

Часть If необходима для оператора AniJS, который вы добавляете для анимации любого элемента. Часть On является необязательной и, если она не указана, использует текущий элемент в качестве значения по умолчанию. Часть Do также необходима, поскольку она сообщает браузеру, что делать, когда происходит указанное событие. Часть To также необязательна и по умолчанию используется текущий элемент, если он не указан.

Вы также можете использовать ловушки До и После, чтобы указать, что должно происходить до и после того, как AniJS сделает то, что упомянуто в части Do.

Анимация различных элементов

AniJS позволяет запускать анимацию, вызывая ее для любого применимого события, указанного на странице MDN . Точно так же вы можете использовать on и to нацеливания на любой элемент, который вы хотите, используя селекторы CSS. Например, вы можете указать, что хотите прослушивать событие в div.promotion или section div p.first и т. Д. Часть do может использоваться для указания анимации, которую вы хотите применить к различным элементам. AniJS имеет много анимаций, которые можно применить к любому элементу, который вы хотите.

Следующий фрагмент HTML-кода покажет вам, как применить анимацию к элементам, которые будут срабатывать при определенных событиях.

В каждом случае все, что вам нужно сделать, это написать операторы внутри атрибута data-anijs , а библиотека позаботится обо всем остальном. (Мы пропустили часть для всех этих анимаций, чтобы анимация применялась к элементу, внутри которого мы указали атрибут data-anijs .)

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

Вы можете попробовать эти анимации самостоятельно во встроенной демонстрации CodePen.

Управление классами и элементами HTML

AniJS позволяет вам делать больше, чем просто анимировать различные элементы. Например, вы можете использовать его для добавления, удаления или переключения классов, применяемых к различным элементам. Точно так же вы также можете удалять элементы HTML или клонировать их, не добавляя ни одной строки JavaScript. Библиотека также позволяет вам обходить DOM, используя специальные зарезервированные ключевые слова.

Давайте начнем с манипуляции с классом. AniJS имеет три зарезервированных ключевых слова для управления классами. Это $addClass , $removeClass и $toggleClass . Как следует из названия, вы можете использовать их для добавления, удаления и переключения одного или нескольких классов элемента соответственно. Все, что вам нужно сделать, это указать имена классов после зарезервированных ключевых слов.

Точно так же вы можете использовать зарезервированные ключевые слова, такие как $parent , $ancestors , $closest , $find и $children чтобы пройти DOM.

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

Однако то, на каких детей вы ссылаетесь, в некоторых случаях может быть неоднозначным. Например, вы могли бы применить атрибут data-anijs к одному элементу, но установить значение части On для чего-то другого, используя CSS-селекторы. В этой ситуации AniJS не сможет узнать, нужно ли добавлять класс к data-anijs элементам элемента, на который указывает селектор CSS, или к элементу, к которому вы применили атрибут data-anijs .

В таких случаях вы можете устранить неоднозначность, используя другое зарезервированное ключевое слово target Здесь target относится к элементу, указанному селектором CSS.

Рассмотрим следующие три примера, в которых AniJS использовался для переключения классов различных элементов:

В приведенном выше примере я переформатировал HTML, чтобы было легче читать и видеть, что происходит.

Давайте начнем с первого div . В этом случае мы опустили как on и to части data-anijs атрибута 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 команду прослушивать события click для элементов span с shells классов в обоих случаях.

Другие способы манипулирования HTML

Другой способ манипулировать элементами HTML на веб-странице с использованием AniJS — это клонировать или удалить их. Библиотека зарезервировала ключевые слова $remove и $clone которые сообщат вам, хотите ли вы удалить элемент или клонировать его.

Вы можете передать несколько селекторов $remove , чтобы удалить несколько элементов с веб-страницы. Имейте в виду, что разные CSS-селекторы должны быть разделены каналом | персонаж.

Ключевое слово $clone также принимает два параметра. Первый — это селектор CSS, чтобы указать элемент, который вы хотите клонировать. Второй номер — это число, указывающее, сколько копий вы хотите сделать. Например, $clone .shells|10 создаст 10 копий элементов с shells классов и добавит их в качестве дочерних элементов для элемента, для которого был data-anijs атрибут data-anijs . Если копии должны быть добавлены к другому элементу, вы можете указать AniJS на него, указав соответствующий CSS-селектор после в операторе AniJS.

Вывод

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

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