相关疑难解决方法(0)

我正在为移动设备开发HTML5 Web应用程序,并且在动画流畅的情况下遇到了一些麻烦.

基本上,当用户点击按钮时,抽屉(高度为0px的div)应该设置为给定高度(以像素为单位)的动画,并且内容将附加到该抽屉.如果你有一个Pinterest帐户,你可以在http://m.pinterest.com上看到现在的动画(点击评论或列表按钮).

不幸的问题是,在移动设备上,Webkit Transitions不是硬件加速的高度属性,因此它非常滞后,动画也是锯齿状的.

以下是一些代码段:

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>
   

   Run Code Online (Sandbox Code Playgroud)

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;
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. Javascript …

我花了大约4个小时进行一次性能可接受的简单过渡:

首先我尝试了这段代码:

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

结果在Chrome v21.0.1180.89和FireFox v15.0.1上很糟糕,但在IE10上很棒.我捕获了CPU使用率和GPU使用率图,发现chrome不使用GPU作为基本css属性, 现代浏览器的解决方案是什么？