Jak płynnie animować wysokość w CSS lub Javascript na urządzeniach mobilnych

Question

Pracuję nad aplikacją HTML5 dla urządzeń mobilnych i mam problemy z płynnymi animacjami.

Zasadniczo, gdy użytkownik dotknie przycisku, szuflada (element div o wysokości: 0 pikseli) powinna animować się do określonej wysokości (w pikselach), a zawartość zostanie dołączona do tej szuflady. Jeśli masz konto na Pinterest, możesz zobaczyć animację taką, jaka jest teraz, pod numerem http://m.pinterest.com (dotknij przycisku Skomentuj lub Odpnij).

Niefortunnym problemem jest to, że na urządzeniach przenośnych, Webkit Transitions nie są przyspieszane sprzętowo właściwości height, więc jest bardzo opóźniony, a animacja jest postrzępiona.

Oto niektóre fragmenty kodu:

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. ekranu: http://imgur.com/nGcnS,btP3W

Oto ja problemy napotkane z Webkit przeobraża, że ​​nie mogę dowiedzieć się, całkiem :

1. Webkit Przekształca skalę elementów potomnych kontenera, co jest niepożądane w przypadku tego, co próbuję wykonać. -webkit-transform: none zastosowane do dzieci nie wydają się resetować tego zachowania.
2. Przekształcenia w sieci Web nie przenoszą elementów siostrzanych. Tak więc kontener .pin po tym, na którym działamy, nie zostanie automatycznie opuszczony. Można to naprawić ręcznie, ale jest to uciążliwe.

Wielkie dzięki!

Answer 1

Dzięki temu, że telefony komórkowe są tak szybkie, łatwo można zapomnieć, że są to naprawdę skromne urządzenia, gdy porównujesz je ze sprzętem stacjonarnym. Powodem, dla którego strona jest powolny, ponieważ świadczenia powracających:

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

Gdy div rośnie, to ma do pchania i przeliczyć pozycje wszystkich elementów, które są drogie urządzenia mobilnego.

Wiem, że to kompromis, ale jedynym sposobem, w jaki można uzyskać płynniejszą animację, jest położenie: absolute on .comment_wrapper; lub jeśli naprawdę chcesz uzyskać gładką animację masła, spraw, aby wyskoczyła spod ekranu z transformacjami css, tzn.

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


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

Answer 2

Chcesz traslate3d. Należy używać GPU, jeśli urządzenie to obsługuje.

check out to ...

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