В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.
Как-то раз я заметил интересную анимацию placeholder’a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.
Сразу понял, что у HTML нет своего API для этого и надо было использовать JavaScript-хаки. Но слишком много хаков мне хотелось использовать, т.к. код должен быть легко портируем и, желательно, вообще не затрагивать готовую разметку на проектах, которые уже в продакшене.
С использованием CSS attr property и CSS content получился примерно вот такой концепт:
label.placeholder { position: relative; &:after { display: flex; align-items: center; content: attr(data-placeholder); position: absolute; top:0; right: 0; bottom: 0; left: $after-left; font-size: 14px; color: grey; cursor: text; transition: transform $tf-duration $tf, opacity $tf-duration $tf; transform: translateX(0); opacity: 1; color: $input-default-color; } &.hidden { &:after { transform: translateX(40%); opacity: 0; } } }
И немного jQuery:
$(document).ready(function() { function placeholderAnimation() { var $placeholder = $('input[placeholder]'); $placeholder.each(function () { $(this).wrap('<label class="placeholder" data-placeholder="' + this.placeholder + '">').attr('placeholder', ''); }).on('keyup', function () { $(this).parent().toggleClass('hidden', this.value !== ''); }); } placeholderAnimation(); });
Из плюсов:
- Легко портируется на готовые проекты
- CSS подбирает значения плейсхолдеров из HTML => не надо менять разметку
- Всё контролируется CSS-анимациями, соотв. можно налепить всякие cubic-bezier’ы и играться.
- Впишется в любые дизайны, в отличие от всяких там материальных инпутов, где всё прыгает и требует подходящего дизайна всего приложения.
- Быстрый и простой способ сделать UX инпутов немного лучше и приятнее
Из минусов:
- Из-за flexbox’a поддержка IE11+
- Из-за лага в keyup событии, пришлось курсор и первую букву плейсхолдера разделить одной буквой, чтобы при вводе в инпут, плейсхолдер и значения ипута не накладывались друг на друга.
P.S. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.
ссылка на оригинал статьи http://habrahabr.ru/post/265497/
Добавить комментарий