我是这样用的
.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 硬件加速?
最佳答案
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>
关于android - CSS 硬件加速效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27938929/