Я разрабатываю веб-приложение HTML5 для мобильных устройств и сталкиваюсь с небольшими проблемами с плавной анимацией.
По сути, когда пользователь нажимает кнопку, ящик (div с высотой: 0px) должен анимироваться до заданной высоты (в пикселях), и содержимое будет добавлено к этому ящику. Если у вас есть учетная запись Pinterest, вы можете увидеть анимацию, как сейчас, в http://m.pinterest.com (нажмите кнопку Комментарий или Repin).
Несчастная проблема заключается в том, что на мобильных устройствах Webkit Transitions не аппаратно ускоряют свойство высоты, поэтому его чрезвычайно отсталый и анимация зазубрены.
Вот несколько фрагментов кода:
-
HTML: ...
<div class="pin"> <a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a> <div class="comment_wrapper"> <div class="divider bottom_shadow"></div> <div class="comment"> <!-- Content appended here --> </div> <div class="divider top_shadow" style="margin-top: 0"></div> </div> </div> <div class="pin"> ... </div>
-
CSS
.comment_wrapper { -webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out; position: relative; overflow: hidden; width: 100%; float: left; height: 0; } .comment { background: #f4eeee; margin-left: -10px; padding: 10px; height: 100%; width: 100%; float: left; }
-
Javascript (с помощью jQuery):
function showSheet(button, wrapper, height) { // Animate the wrapper in. var css = wrapper.css({ 'height': height + 'px', 'overflow': 'visible', 'margin-bottom': '20px', 'margin-top': '10px' }); button.addClass('pressed'); } $('.comment_btn').click(function() { showSheet($(this), $(this).siblings('.comment_wrapper'), 150); });
-
Скриншоты: http://imgur.com/nGcnS,btP3W
Вот проблемы, с которыми я столкнулся с трансляциями Webkit, которые я не могу понять:
- Webkit Transforms масштабирует дочерние элементы контейнера, что нежелательно для того, что я пытаюсь сделать.
-webkit-transform: none
, применяемый к детям, не выглядит таким образом reset. - Трансляции Webkit не перемещают элементы-братья. Таким образом, контейнер
.pin
после того, как мы работаем, автоматически не опускается. Это можно исправить вручную, но это хлопот.
Спасибо большое!