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

я разрабатываю веб-приложение HTML5 для мобильных устройств и столкнулся с некоторыми проблемами с плавной анимацией.

по существу, когда пользователь нажимает кнопку, ящик (div с высотой: 0px) должен анимироваться на заданную высоту (в пикселях), и содержимое будет добавлено к этому ящику. Если у вас есть учетная запись Pinterest, вы можете увидеть анимацию, как она есть сейчас, вhttp://m.pinterest.com (нажмите кнопку комментарий или Репин).

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

вот некоторые фрагменты кода:

  1. 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>

  2. в 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;
}

  3. в 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);
});

  4. скриншоты :http://imgur.com/nGcnS, btP3W

Screenshot of the question

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

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

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

12
android css-transforms css3 iphone mobile-safari

2 ответов

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

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

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

Я знаю, что это компромисс, но единственный способ вы можете сделать анимацию более гладкой, поставив position: absolute on .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%)'
});
8

вы хотите traslate3d. Следует использовать GPU, если устройство поддерживает его.

зацени...

http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

0