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

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

12 голосов
/ 14 октября 2011

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

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

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

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

  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 Transforms, которые я не могу понять:

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

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

Ответы [ 2 ]

8 голосов
/ 14 октября 2011

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

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

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

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

Вы хотите traslate3d.Следует использовать графический процессор, если устройство поддерживает его.

проверить это ...

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

...