Возможна ли реализация анимации потягивая шторки как в android на чистом css, для тач устройств?

Question

[Вячеслав Лебедев]

Добрый вечер!
Подскажите как сделать подобие потягивания шторки на css, если это невозможно на чистом css, то как сделать такое с применением js?
Спасибо!

ps:
В настоящий момент, решил использовать начало анимации (mobile) по нажатию с задержкой 0s:

transition .5s ease 0s

  &:active
    margin-bottom 0 // плашечка выезжает снизу. изначально ей задан минусовой margin

Answer 1

[Андрей Б.]

Встречал такую демку, ссылку к сожалению не сохранил. Есть плагин pep.briangonzalez.org, там в демке под №9 как раз то, что тебе нужно.
На чистом CSS такое не сделать, так как здесь нужно обрабатывать события.
В теории, можно взять например этот плагин , и привязать на свайп вниз добавление класса с css анимацией, можно взять готовую из animate.css. И на событие "перетаскивание" повесить добавление/удаление отступа сверху. Думаю должно получиться.
Самому стало интересно, будет время попробую написать.

Comments

[Вячеслав Лебедев]

Хотелось бы обойтись без jQuery, так как использую библиотечку zepto.
Как бы на чистом js написать такое событие?

[Вячеслав Лебедев]

На данном этапе, мне удалось сделать на css по удерживанию (за ярлычек), открытие шторки. Протестировал на своем android'e.
На компе так же (в симуляторе iphone 4). По удерживанию, открывается шторка. На стационарных, по ховеру.
Вот только как объяснить пользователю, что ему нужно не тянуть, а нажать и чуточку подождать?) Есть какие нибудь идеи, или может быть лучшая идея по реализации схожего с "погяниваем шторки" функционала?
Уж не хочется прикручивать в проект огромную библиотеку для такой мелочи :)

[Вячеслав Лебедев]

Кстати, моя реализация работает очень не однозначно.
На стационарниках (в симуляторе смартфонов), по тачу на ярлычек, шторка открывается и сразу закрывается (надо удерживать, чтобы посмотреть что там), а на android'e по удерживанию, шторка остается и не убегает, и только когда свайпну, она убегает обратно.

[Андрей Б.]

Если ты используешь zepto, то в чем проблема то, он ведь поддерживает трогательные события, так как нацелен на мобильную разработку.

[Андрей Б.]

На чистом CSS, еще раз повторяю, точного поведения не добиться, можно имитировать тап, но удерживание не сделаешь.

[Вячеслав Лебедев]

Андрей Б.: на счет zepto не знал :) спасибо за наводку. Пошел искать в манах, что то похожее)

[Вячеслав Лебедев]

Андрей Б.: по подробнее пожалуйста :)
Как имитировать тап, и что значит удерживание?

transition .5s ease 0s

  &:active
    margin-bottom 0

Вот такая конструкция отрабатывает на android'e и в симуляторе по разному.
В симуляторе, по тапу плашечка дергается, если удерживать, то она откроется до конца и будет открыта пока не отпустить тап (в общем, как и задумано и реализовано).
Однако, в андри, только долгий тап открывает плашечку и не убирает ее.

[Вячеслав Лебедев]

Андрей Б.: почему то у меня не получается осуществить tap или swipe

[Андрей Б.]

Вячеслав Лебедев Да забудьте вы про CSS. Что вы к нему прицепились. Для таких манипуляций нужно обрабатывать события, а CSS этим не занимается. Насчет имитации тапа, можно поколдовать с label и скрытым чекбоксом, при :checked делать что-то. Да и зачем прокладывать путь через задницу когда есть zepto. Курите ману, там ведь наглядные примеры, у меня нет времени сейчас, работа.

[Вячеслав Лебедев]

Андрей Б.: :checked - взял на заметку. курю дальше маны) Спасибо!

[Вячеслав Лебедев]

Андрей Б.: оказалось, есть zepto и zeptojs в bower'e, второе как раз то, что мне нужно, там и тач библиотечку нашел.