Comment en douceur animer hauteur en CSS ou de Javascript sur les appareils mobiles

Je développe une application web HTML5 pour les appareils mobiles et a couru dans un peu de difficulté avec des animations fluides.

Essentiellement, lorsqu'un utilisateur appuie sur un bouton, d'un tiroir (un div avec height: 0px) devrait inciter à une certaine hauteur (en pixels) et du contenu sera ajouté à ce tiroir. Si vous avez un compte Pinterest, vous pouvez voir l'animation comme il est maintenant, à http://m.pinterest.com (appuyez sur le Commentaire ou Repin bouton).

Le malheureux problème est que sur les appareils mobiles, Webkit Transitions ne sont pas à accélération matérielle de la hauteur de la propriété, de sorte que son très lag et l'animation est en dents de scie.

Voici quelques extraits de code:

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 (à l'aide de 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);
});

Captures d'écran : http://imgur.com/nGcnS,btP3W

Comment en douceur animer hauteur en CSS ou de Javascript sur les appareils mobiles

Voici les problèmes que j'ai rencontré avec Webkit Transforme que je ne peux pas tout à fait comprendre:

Webkit Transforme échelle les enfants du conteneur, ce qui est indésirable pour ce que je suis en train de faire. -webkit-transform: none appliqué aux enfants ne semblent pas réinitialiser ce comportement.
Webkit Transforme ne pas déplacer les éléments frères. Ainsi, la .pin le conteneur après celui que nous avons ne se déplace pas automatiquement. Ceci peut être résolu manuellement, mais c'est une corvée.

Merci beaucoup!

OriginalL'auteur Justin Edmund | 2011-10-13

8

Avec téléphones mobiles si rapides qu'il est facile d'oublier qu'ils sont en fait assez humble appareils lorsque vous les comparez à de bureau matériel. La raison pourquoi votre page est lente à cause de rendu des remboursements:

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

Lorsque la div se développe, il a qu'à pousser et à recalculer les positions de tous les éléments, ce qui est cher pour un appareil mobile.

Je sais que c'est un compromis, mais la seule façon que vous pouvez faire de l'animation plus fluide est par la mise en position: absolute .comment_wrapper; ou si vraiment vous voulez le beurre lisse de l'animation, de la faire apparaître sous l'écran avec css transforme, c'est à dire
```
.comment_wrapper {
  height: 200px;
  position: absolute;
  width: 100%;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
}


var css = wrapper.css({
    '-webkit-transform': 'translate(0, 100%)'
});
```
Merci beaucoup! Sachant que c'est assez utile. Je suis assez sûr que je vais reconsidérer cette interaction, mais qu'entendez-vous par faire de la pop de sous l'écran avec le transforme?
Modifié la réponse avec des exemples de code, un exemple est le clavier virtuel qui se glisse à partir du bas de l'écran.
Si vous utilisez translate3d(0, 100%, 0) c'est encore plus rapide, car l'accélération matérielle pour le coup 🙂

OriginalL'auteur Duopixel
0

Vous voulez traslate3d. Doit utiliser le GPU si le périphérique prend en charge.

vérifier cela...

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

OriginalL'auteur user2454026

Vous devez vous connecter pour publier un commentaire.