gpt4 book ai didi

javascript - 两个串行 webkit 转换在某些 Android 设备上不起作用

转载 作者:行者123 更新时间:2023-11-28 13:26:55 25 4
gpt4 key购买 nike

我想将两个 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。有没有人有同样的经历?

最佳答案

我们遇到了同样的问题,这是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com