5

ハードウェアアクセラレーションCSS3タグ（以下のコードを参照）を使用したアニメーションは、SamsungGalaxySIIIのGoogleChromePCブラウザーおよびAndroidブラウザーで適切に機能します。ただし、Samsung GalaxyTab10.1のAndroidブラウザでは同じことが機能しません。Samsung 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>

よろしく、ビナヤ

4

0 に答える 0