如何平滑地在移动设备上的CSS或Javascript中的高度 [英] How to smoothly animate height in CSS or Javascript on mobile devices

问题描述

我正在为移动设备开发HTML5网络应用程序，并在平滑动画方面遇到一些麻烦。

基本上，当用户点击按钮时， （div的高度：0px）应该动画到一个给定的高度（以像素为单位），内容将被附加到该抽屉。如果您有Pinterest帐户，则可以在

当div增长时，它必须推送并重新计算所有元素的位置，这是一个移动设备昂贵。

我知道这是一个妥协，但你可以使动画更平滑的唯一方法是通过把位置：绝对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％）'
} ）; 
  

I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.

Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).

The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.

Here are some code snippets:

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

Here are the problems I encountered with Webkit Transforms that I can't quite figure out:

1. Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
2. Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.

Thanks a lot!

解决方案

With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:

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

When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.

I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.

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


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

这篇关于如何平滑地在移动设备上的CSS或Javascript中的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！