我想将两个 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>
第二次转换的结果直接应用于 Android 4.0.4 三星平板电脑默认浏览器(GT-P5110 GT-P3110 ...)上，没有任何转换。其他设备工作正常。 我试过使用有/没有 3d 后缀并打开/关闭 GL。有没有人有同样的经历？
最佳答案
我们遇到了同样的问题，这是 Android 4.0.4 WebView 的一个(大)错误。我们不得不在我们的网络应用程序上再次编写一些动画。 诀窍是为每个转换使用 CSS 矩阵属性，而不是特定的平移、缩放等。
此链接非常适合了解有关二维矩阵的更多信息: http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html
关于javascript - 两个串行 webkit 转换在某些 Android 设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14052654/