Після кількох років переробки цифрових сервісів із використанням однотонних кольорів, більш витонченого дизайну, коротше кажучи, спрощення, ось Google і його нові рекомендації, які знову порушують правила ергономіки та дизайну: «Матеріальний дизайн» (http://www.google.com/design/spec/material-design/introduction.html).
Якщо на перший погляд здається, що для Front-End-розробника все кардинально не змінилося, то ми повинні зосередити зусилля в основному на анімації та сенсі, щоб надати їм.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
Створення ефектів, які дозволяють анімованим переходам самостійно розповідати історію відвідувачам, засноване на одному принципі: можливість ланцюжка анімацій у ключові моменти, вибрані цифровою командою.
Протягом кількох років сучасні браузери та відповідні механізми візуалізації (часто засновані на Webkit) надають нам технічний елемент, необхідний для цього досягнення: ініціювання подій.
І точніше подія переходуEnd, яка знаменує кінець анімованої зміни стану одного або кількох елементів.
приклад:
Скажімо, ми хочемо, щоб елемент з’явився, а потім подовжив його, перш ніж остаточно збільшити.
Якщо налаштована «класична» анімація, тобто зміна станів, усі зміни відбуватимуться одночасно. З’явиться елемент, потім одним рухом візьміть висоту та подовжіть. Подія TransitionEnd дозволяє вам дочекатися закінчення попередньої анімованої зміни стану перед початком наступної.
Тому ми можемо думати в термінах послідовності держав, перехідного сценарію.
:
1. Визначено класи CSS
.initial-state-element-invisible { перехід: все полегшення 250 мс; -webkit-transition: все полегшення 250 мс; -moz-transition: все полегшення 250 мс; -o-перехід: 250 мс розслаблення; непрозорість: 0; висота: 100 пікселів; } .state-number-two-element-visible { opacity: 1; } .state-number-three-highest-element { width: 100px; висота: 300 пікселів; } .state-number-three-widest-element { width: 300px; висота: 300 пікселів; }
2. Трохи JavaScript (JQuery), щоб прослухати тригер події та застосувати нові властивості CSS у потрібний час.
$('.state-initial-element-invisible').click(function(){ $(this).addClass('state-number-two-element-visible'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $(this).addClass('state-number-three-hostest-element'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $( this) .addClass('число-стан-три-найбільший-елемент'); }); }); });
Стан 1
Наша стихія невидима
Стан 2
Видно нашу стихію
Стан3
Коли наш елемент закінчує з’являтися, він починає набирати висоту…
Стан4
… потім він лягає.
на закінчення
Цей простий приклад, який відповідає рекомендаціям щодо намірів анімації, демонструє, що можна допомогти зрозуміти зручність використання інтерфейсу виключно за допомогою його анімації за допомогою події переходуEnd.
