5

使用硬件加速 CSS3 标签的动画（参见下面的代码）在三星 Galaxy SIII 上的 Google Chrome PC 浏览器和 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>

亲切的问候，Vinaya

4

0 回答 0