Как плавно анимировать высоту в CSS или Javascript на мобильных устройствах

Я разрабатываю веб-приложение 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

Screenshot of the question

Вот проблемы, с которыми я столкнулся с трансляциями Webkit, которые я не могу понять:

  • Webkit Transforms масштабирует дочерние элементы контейнера, что нежелательно для того, что я пытаюсь сделать. -webkit-transform: none, применяемый к детям, не выглядит таким образом reset.
  • Трансляции Webkit не перемещают элементы-братья. Таким образом, контейнер .pin после того, как мы работаем, автоматически не опускается. Это можно исправить вручную, но это хлопот.

Спасибо большое!

Ответы

Ответ 1

С быстрыми мобильными телефонами легко забыть, что они на самом деле довольно скромные устройства, когда вы сравниваете их с настольным оборудованием. Причина, по которой ваша страница замедляет ее из-за рендеринга:

http://code.google.com/speed/articles/reflow.html

Когда div растет, он должен выталкивать и пересчитывать позиции всех элементов, что дорого для мобильного устройства.

Я знаю, что это компромисс, но единственный способ сделать анимацию более плавным - поставить позицию: absolute на .comment_wrapper; или если вы действительно хотите масляную гладкую анимацию, сделайте ее всплывающей из-под экрана с помощью css-преобразований, т.е.

.comment_wrapper {
  height: 200px;
  position: absolute;
  width: 100%;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
}


var css = wrapper.css({
    '-webkit-transform': 'translate(0, 100%)'
});