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

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

В дополнение можно использовать daneden.github.io/animate.css/ для создания плавных и красивых эффектов, даже не сильно разбираясь в CSS.
Выглядит круто.

Как-то бажно на главной у них, если навести указатель на кнопки гитхаба, и вывести слева, то кнопка остаётся синей. А если то же самое проделать через верх/низ, то не остаётся. Chrome 34
Декларативность это замечательно — пользоваться легко, реализовать не так просто, но очень заманчиво.
Ох, лол, докатились.
Давайте ещё туда 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>
Ничего в этом страшного нет, чтобы это можно было писать жирным шрифтом.
Боюсь, что если открыть консоль на таком «декларативном» сайте, то могут разболеться глаза.
Only those users with full accounts are able to leave comments. Log in, please.