Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 20
Мне кажется, такие вещи должны декларироваться в CSS'е, а не в HTML'е.
В плане хаб лишний?)
В плане: логика проекта рушится, когда для того, чтобы изменить явно визуальную часть нужно лезть в язык разметки.
Конечно вообще всё можно запихнуть в файл разметки, или писать логику игры в файлах стилей… Но зачем намеренно разводить беспорядок, когда этого легко можно избежать?
Конечно вообще всё можно запихнуть в файл разметки, или писать логику игры в файлах стилей… Но зачем намеренно разводить беспорядок, когда этого легко можно избежать?
А, ну в этом плане он мне чем-то Ангуляр напомнил)
Не путайте шаблоны ангуляра и эту штуку.
Собственно в чем разница?
Angular использует html для указания куда и как разместить данные и как реагировать на события.
«Эта штука» использует html для указания как будет реагировать элемент с помощью анимации.
Оба используют логические выражения внутри атрибутов.
Просто назовите это animation-шаблон и как будто уже не html и можно код опять смешивать с разметкой.
Angular использует html для указания куда и как разместить данные и как реагировать на события.
«Эта штука» использует html для указания как будет реагировать элемент с помощью анимации.
Оба используют логические выражения внутри атрибутов.
Просто назовите это animation-шаблон и как будто уже не html и можно код опять смешивать с разметкой.
Только анимация в Angular как раз-таки прозрачно задается с помощью CSS-класса и описывается в CSS.
Там не только визуальная часть, но и логика событий. И кода совсем не много, чтобы его разделять ещё.
В этом несовершеннейшем из миров, увы, CSS-анимации еще не всеми браузерами поддерживаются, и иногда graceful degradation — не выход, так как анимация является важной частью интерфейса. Да и сам модуль CSS Animations не безупречен — например, нельзя анимировать от
height: 0px; до height: auto;…
На мой взгляд анимации (да и не только они) в CSS слишком многословны, плюс вы не сможете добавить туда условий и очередей. HTML изначально — гибридный язык контейнеров (взять те же микроформаты) — приходиться свыкнуться с мыслью, что все больше и больше визуальных моментов будут декларироватьс в том числе в разметке.
Нет, я не за style — но для последнего специально придуман CSS.
Нет, я не за style — но для последнего специально придуман CSS.
Это чудесно! Без зависимостей, 6,5 Кб minified. Спасибо за информацию!
Отличная вещь спасибо! Очень не хватало «if: animationend» возможности при построении отзывчивого UI.
В дополнение можно использовать daneden.github.io/animate.css/ для создания плавных и красивых эффектов, даже не сильно разбираясь в CSS.
В дополнение можно использовать daneden.github.io/animate.css/ для создания плавных и красивых эффектов, даже не сильно разбираясь в CSS.
Я просто оставлю это здесь: dev.w3.org/fxtf/web-animations/
Выглядит круто.
Как-то бажно на главной у них, если навести указатель на кнопки гитхаба, и вывести слева, то кнопка остаётся синей. А если то же самое проделать через верх/низ, то не остаётся. Chrome 34
Как-то бажно на главной у них, если навести указатель на кнопки гитхаба, и вывести слева, то кнопка остаётся синей. А если то же самое проделать через верх/низ, то не остаётся. Chrome 34
Декларативность это замечательно — пользоваться легко, реализовать не так просто, но очень заманчиво.
Спасибо большое! Чудесная вещь :)
Почему-то пока не посмотрел под кат, ожидал увидеть в статье S-выражения.
Ох, лол, докатились.
Давайте ещё туда BEM и Angular добавим?
Давайте ещё туда 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>
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
AniJS – библиотека для декларативного описания CSS-анимации