9 мая 2014 в 22:44

AniJS – библиотека для декларативного описания CSS-анимации

На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!



По-моему это прекрасное решение, описывать анимацию в духе:

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Всё максимально интуитивно: при клике на указанном div, делаем анимацию flipInY на элементе .container-box.

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

<div class="element1" data-anijs="if: click, do: wobble, to: .element2">Нажми меня!</div>
<div class="element2">Здесь будет Wobble!</div>
<div class="element3" data-anijs="if: animationend, on: .element2, do: hinge">А потом я упаду</div>

То есть при клике на .element1, будет применён эффект «потрясывания» (wobble) для .element2, по завершению которого к .element3 будет применён эффект выпадения за нижнюю границу окна браузера.

В общем много интересного!
Заинтересовавшихся прошу ознакомиться.
@uoziod
карма
25,7
рейтинг 0,0
Пользователь
Похожие публикации
Самое читаемое Разработка

Комментарии (20)

  • +8
    Мне кажется, такие вещи должны декларироваться в CSS'е, а не в HTML'е.
    • 0
      В плане хаб лишний?)
      • +5
        В плане: логика проекта рушится, когда для того, чтобы изменить явно визуальную часть нужно лезть в язык разметки.
        Конечно вообще всё можно запихнуть в файл разметки, или писать логику игры в файлах стилей… Но зачем намеренно разводить беспорядок, когда этого легко можно избежать?
        • +2
          А, ну в этом плане он мне чем-то Ангуляр напомнил)
          • 0
            Не путайте шаблоны ангуляра и эту штуку.
            • +4
              Собственно в чем разница?
              Angular использует html для указания куда и как разместить данные и как реагировать на события.
              «Эта штука» использует html для указания как будет реагировать элемент с помощью анимации.
              Оба используют логические выражения внутри атрибутов.
              Просто назовите это animation-шаблон и как будто уже не html и можно код опять смешивать с разметкой.
          • +1
            Только анимация в Angular как раз-таки прозрачно задается с помощью CSS-класса и описывается в CSS.
        • 0
          Там не только визуальная часть, но и логика событий. И кода совсем не много, чтобы его разделять ещё.
    • 0
      В этом несовершеннейшем из миров, увы, CSS-анимации еще не всеми браузерами поддерживаются, и иногда graceful degradation — не выход, так как анимация является важной частью интерфейса. Да и сам модуль CSS Animations не безупречен — например, нельзя анимировать от height: 0px; до height: auto;
    • 0
      На мой взгляд анимации (да и не только они) в CSS слишком многословны, плюс вы не сможете добавить туда условий и очередей. HTML изначально — гибридный язык контейнеров (взять те же микроформаты) — приходиться свыкнуться с мыслью, что все больше и больше визуальных моментов будут декларироватьс в том числе в разметке.

      Нет, я не за style — но для последнего специально придуман CSS.
    • 0
      Это чудесно! Без зависимостей, 6,5 Кб minified. Спасибо за информацию!
  • +1
    Отличная вещь спасибо! Очень не хватало «if: animationend» возможности при построении отзывчивого UI.

    В дополнение можно использовать daneden.github.io/animate.css/ для создания плавных и красивых эффектов, даже не сильно разбираясь в CSS.
  • +1
    Я просто оставлю это здесь: dev.w3.org/fxtf/web-animations/
  • –1
    Выглядит круто.

    Как-то бажно на главной у них, если навести указатель на кнопки гитхаба, и вывести слева, то кнопка остаётся синей. А если то же самое проделать через верх/низ, то не остаётся. Chrome 34
  • –1
    Декларативность это замечательно — пользоваться легко, реализовать не так просто, но очень заманчиво.
  • 0
    Спасибо большое! Чудесная вещь :)
  • 0
    Почему-то пока не посмотрел под кат, ожидал увидеть в статье S-выражения.
  • +1
    Ох, лол, докатились.
    Давайте ещё туда BEM и Angular добавим?


    <div data-anijs="if: click, do: flipInY, to: .container-box" class="goods__item goods__item_new_yes box" ng-repeat="phone in phones | filter:query | orderBy:orderProp"></div>
    
    • +3
      Ничего в этом страшного нет, чтобы это можно было писать жирным шрифтом.
      • +3
        Боюсь, что если открыть консоль на таком «декларативном» сайте, то могут разболеться глаза.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.