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

您需要在父元素上应用transform-style: preserve-3d和position: relative才能使其正常运行。

  

<强>保留-3D

     

表示元素的子元素应位于   三维空间中。

然后添加

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

到子元素。

让我们说你的父母有班级parent，完整的代码就像这样

.parent{
      position: relative; /*do not niss this it is very important since the child has an obsolute position*/
      transform-style: preserve-3d
}
.item{
      transform: translate3d(0,0,0);
      perspective: 1000;
      position: absolute;
      left: 0;
      top: 0px;
      transition: 0.4s
}

Answer 2

This似乎是您实现目标的简化示例（并且仍然可以大幅提升）。

使用css：

transform: translate(-200px,0);

（使用vendor prefixes）

＆＃13;

＆＃13;

$(".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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;