两个串行webkit转换在某些android设备上不工作

Two serial webkit transitions does not work on some android devices

本文关键字：android 工作 转换 两个 webkit      更新时间：2023-09-26

我想有两个webkitTransitions一个接一个地应用于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。有人有同样的经历吗?

我们遇到了同样的问题，这是Android 4.0.4 WebView的一个(大)bug。我们必须在我们的web应用程序上再次编写一些动画。诀窍是对每个转换使用CSS matrix属性，而不是特定的翻译、缩放等等。

这个链接是非常好的学习更多关于二维矩阵:http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html

相关文章：