0

我想让两个 webkitTransition 一个接一个地应用于 webkitTransform 属性的同一个 div 元素。这是代码：

<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

此结果将直接应用于第二个转换，无需在 Android 4.0.4 三星平板电脑默认浏览器 (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 回答