0

webkitTransform プロパティの同じ div 要素に 2 つの webkitTransitions を 1 つずつ適用したいと考えています。コードは次のとおりです。

<html>
<head>
    <title></title>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", init);
        function init() {
            var d1 = document.getElementById("d1");

            d1.style.webkitTransition = "-webkit-transform 1s linear";
            d1.style.webkitTransform = "translate(-100px,0px)";

            setTimeout(function(){
                d1.style.webkitTransition = "-webkit-transform 1s linear";
                d1.style.webkitTransform = "translate(-150px,0px)";
            }, 1500);
        }
    </script>
       <style type="text/css">
           div#d1 {
               position: absolute;
               background-color: rgba(13,15,112,122);
               width: 200px;
               height: 200px;
               overflow: hidden;
           }
       </style>
</head>
<body>
<div id="d1"/>
</body>
</html>

http://bit.ly/UnTqAV

この 2 番目の変換結果は、Android 4.0.4 Samsung タブレットのデフォルト ブラウザ (GT-P5110 GT-P3110 ...) に遷移することなく直接適用されます。他のデバイスは正常に動作します。3d 接尾辞の有無にかかわらず、オープン GL のオン/オフを切り替えて使用してみました。誰も同じ経験をしていますか？

4

1 に答える 1

0

同じ問題がありました。これは Android 4.0.4 WebView の (大きな) バグです。webapp にいくつかのアニメーションを書き直さなければなりませんでした。トリックは、特定の変換、スケールなどではなく、すべての変換に CSS マトリックス プロパティを使用することです。

このリンクは、2D マトリックスの詳細を学ぶのに非常に役立ちます: http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html

于 2013-06-11T10:11:05.533 に答える