android - CSS 硬件加速效果不佳

Question

我是这样用的

.item{
      -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
position: absolute;
left: 0;
top: 0px;
transition: 0.4s;
}

动画演示:http://jsfiddle.net/q1a4wwar/13/

$(function() {
  $('.item').on('click', function() {
    $(this).addClass('slideLeftItem');
    $('.content').show(0, '', function() {
      $('#back').show();
    }).addClass('slideRightContent');
  });


  $('#back').on('click', function() {

    $('.item').show().removeClass('slideLeftItem');
    $(this).hide();
    $('.content').removeClass('slideRightContent').once('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',

      function() {
        $(this).hide();
      });
  });
});

.content {
  display: none;
  position: absolute;
  right: -200px;
  top: 0px;
  background: blue;
  transition: 0.4s;
}
.item {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  left: 0;
  top: 0px;
  transition: 0.4s;
}
.slideRightContent {
  right: 0px;
}
.slideLeftItem {
  left: -200px;
}
#back {
  display: none;
  height: 20px !Important;
  background: grey !Important;
}
.content,
.item {
  width: 100%;
  ;
  height: 100%;
  background: red;
}
.phone {
  position: relative;
  overflow: hidden;
  width: 200px;
  border: 10px solid #000;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="back">
  < back</div>
    <br>
    <div class="phone">
      <div class="item">item</div>
      <div class="content">My content</div>
    </div>

但它在我的手机 (Galaxy SIII) 上仍然滞后。

我是否正确使用了 css 硬件加速？

Answer 1

This似乎是您所取得成就的简化示例(并且仍然可以大大改进)。

它使用的是:

transform: translate(-200px,0);

(与 vendor prefixes )

$(".heading").click(function() {
  $(".heading").addClass("toggle").removeClass("toggleBack");
  $(".content").addClass("toggle").removeClass("toggleBack");
  $(".back").addClass("displayMe");
});

$(".back").click(function() {
  $(".wrapper div").removeClass("toggle").addClass("toggleBack");
  $(".back").removeClass("displayMe");
});

html,body{margin:0;padding:0;}
.wrapper {
  width: 200px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: none;
  white-space: nowrap;
  border: 5px solid black;
  background:red;
}
.wrapper div {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: red;
  margin: 0;
  padding: 0;
}
.back {
  display: none;
}
.toggle {
  transition: all 0.5s;
  -webkit-transform: translate(-200px, 0);
  -moz-transform: translate(-200px, 0);
  -ms-transform: translate(-200px, 0);
  -o-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
}
.toggleBack {
  transition: all 0.5s;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.displayMe {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back">back</div>
<div class="wrapper">
  <div class="heading">FirstPage</div>
  <div class="content">NextDiv</div>
</div>