CSS
JavaScript
HTML
Comments 20
+8
Мне кажется, такие вещи должны декларироваться в CSS'е, а не в HTML'е.
+5
В плане: логика проекта рушится, когда для того, чтобы изменить явно визуальную часть нужно лезть в язык разметки.
Конечно вообще всё можно запихнуть в файл разметки, или писать логику игры в файлах стилей… Но зачем намеренно разводить беспорядок, когда этого легко можно избежать?
+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
Выглядит круто.

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