硬件加速css3动画使用-webkit-transform translate3d无法在Samsung Galaxy Tab 10.1上运行

Vin*_*ndi 5 android-browser css-transitions webkit-transform samsung-mobile

使用硬件加速CSS3标签的动画(参见下面的代码)在Google Chrome PC浏览器和三星Galaxy SIII上的Android浏览器中运行良好.但是,在三星Galaxy Tab 10.1上的Android浏览器上同样不起作用.如何在三星Galaxy Tab设备上实现硬件加速滑入/缩小动画？

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
    border: 1px solid black;
    background-color: red;
    position: fixed;
    left: 0px;
}

#div1.active
{
    -webkit-transform-origin: 0% 0%;
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
    -webkit-transition-duration:2s; 
    -webkit-transform: translate3d(-100px,0px,0px);
}

#div1.inactive
{
    -webkit-transform-origin: 0% 0%;
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
    -webkit-transition-duration:2s; 
    -webkit-transform: translate3d(0px,0px,0px);
}

#button1
{
    position: fixed;
    left: 200px;
}
</style>

<script>
var flag = 1;
function myFunction()
{
    if (++flag % 2 === 0) {
        //alert("active");
        document.getElementById("div1").setAttribute("class", "");
        document.getElementById("div1").setAttribute("class", "active");
    } else {
        //alert("inactive");
        document.getElementById("div1").setAttribute("class", "");
        document.getElementById("div1").setAttribute("class", "inactive");
    }
}
</script>
</head>

<body>
<div id="div1">HELLO</div>
<button id="button1" onclick="myFunction()">Click me</button>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

亲切的问候,Vinaya

归档时间：	12 年，11 月前
查看次数：	1576 次
最近记录：	12 年，11 月前