Làm thế nào để có chiều cao animate trong CSS hoặc Javascript trên thiết bị di động

Question

Tôi đang phát triển một ứng dụng web HTML5 cho thiết bị di động và gặp phải một chút rắc rối với hoạt ảnh mượt mà. Về cơ bản, khi người dùng nhấn vào một nút, một ngăn kéo (một div có chiều cao: 0px) sẽ tạo hiệu ứng cho chiều cao đã cho (bằng pixel) và nội dung sẽ được thêm vào ngăn kéo đó. Nếu bạn có tài khoản Pinterest, bạn có thể xem hoạt ảnh như hiện tại, tại http://m.pinterest.com (nhấn vào nút Nhận xét hoặc Lặp lại).

Vấn đề không may là trên thiết bị di động, quá trình chuyển đổi Webkit không tăng tốc độ phần cứng, do đó cực kỳ lag và hoạt ảnh bị lởm chởm.

Dưới đây là một số đoạn mã:

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 (sử dụng 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. Ảnh chụp màn hình: http://imgur.com/nGcnS,btP3W

Dưới đây là những vấn đề tôi gặp phải với Webkit Chuyển dạng mà tôi không thể hình dung ra khá :

1. Biến đổi Webkit mở rộng quy mô cho trẻ em của vùng chứa, điều không mong muốn đối với những gì tôi đang cố gắng thực hiện. -webkit-transform: none áp dụng cho trẻ em dường như không đặt lại hành vi này.
2. Chuyển đổi Webkit không di chuyển các phần tử anh chị em. Vì vậy, các container .pin sau khi một trong chúng tôi đang hoạt động trên không di chuyển xuống tự động. Điều này có thể được cố định bằng tay, nhưng nó là một rắc rối.

Cảm ơn rất nhiều!

Answer 1

Với điện thoại di động quá nhanh, thật dễ dàng để quên chúng thực sự là thiết bị khá khiêm tốn khi bạn so sánh chúng với phần cứng máy tính để bàn. Lý do khiến trang của bạn là chậm nó vì chỉnh lại dòng render:

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

Khi div phát triển, nó có để đẩy và tính toán lại các vị trí của tất cả các yếu tố, đó là tốn kém với một thiết bị di động.

Tôi biết đó là một sự thỏa hiệp, nhưng cách duy nhất bạn có thể làm cho hoạt hình mượt mà hơn là bằng cách đặt vị trí: tuyệt đối trên .comment_wrapper; hoặc nếu bạn thực sự muốn hoạt hình trơn tru của bơ, hãy làm cho nó bật lên từ dưới màn hình với các biến đổi css, tức là

.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

Bạn muốn traslate3d. Nên sử dụng GPU nếu thiết bị hỗ trợ nó.

việc kiểm tra này ra ...

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