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

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

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

AniJS позволяет вам создавать анимированные стили для вашего сайта без кодирования JavaScript или CSS! Вы можете указать все ваши анимации из HTML, используя простой Если — В — Сделайте — Синтаксис .

Установка

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

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

 bower install anijs --save

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

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

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

 Если (любое событие происходит), On (любой элемент), Do (что-то вроде анимации, добавления / удаления класса), To (этот или любой другой элемент) 

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

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

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

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

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

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

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

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

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

Манипулирование классами и элементами HTML

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

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

Аналогичным образом вы можете использовать зарезервированные ключевые слова, такие как $ parent $ ancestors $ close $ найти и $ children для прохождения DOM.

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

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

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

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

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

Мы представили два разных утверждения внутри атрибута data-anijs третьего div . Оба этих оператора переключают один и тот же желтый класс. Тем не менее, эффекты совершенно разные из-за использования ключевого слова .

В первом случае мы добавили ключевое слово после $ parent . Это говорит AniJS, что мы хотим переключить класс для родительского элемента, указанного классом shells . Во втором случае мы пропустили ключевое слово поэтому AniJS меняет фон родителя текущего div . Поскольку родителем div является тело вся страница становится желтой.

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

Еще одна вещь, заслуживающая внимания, заключается в том, что хотя атрибут data-anijs для третьего окна имеет два операторам, нажатие на поле само по себе не имеет никакого эффекта. Это связано с тем, что мы уведомили Аниса, чтобы он прослушал события щелчка на элементах с ракетами класса в обоих случаях.

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

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

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

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

Заключение

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

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