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 будет применён эффект выпадения за нижнюю границу окна браузера.

    В общем много интересного!
    Заинтересовавшихся прошу ознакомиться.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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
                                  Боюсь, что если открыть консоль на таком «декларативном» сайте, то могут разболеться глаза.

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