css3的属性在iphone的app内不执行

clipboard.png

app内加载html页面,页面内有rotate属性,在android内可以旋转,但是在ios内不能旋转,js内的alert(n)和alert(123)都执行了,请问是兼容问题么?还有怎么解决?手机是iPhone5s

clipboard.png
android中都可以,ios中不行
好像是兼容的问题,提取出的demo在safari中不能执行,chrome中可以,请问可以解决么?

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>hello World</title>
    <style>
        #pointer{
            animation:run 2.5s linear forwards;
            -webkit-animation:run 2.5s linear forwards; /* Safari 和 Chrome */
        }
    </style>
</head>
<script type="text/javascript">
function aa(){
    var n = 3;
    var rotate = 60 * n + 1080;
    var keyframe = "@-webkit-keyframes run{0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}\n" +
            "100%{transform:rotate(" + rotate + "deg);-webkit-transform:rotate(" + rotate + "deg);}}";
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = keyframe;
    document.getElementById('pointer').appendChild(style);
}        
</script>


<body>
    <div id="pointer" style="height:100px;width:100px;background:red;position:absolute;left:300px;top:300px;" onclick="aa()">

    </div>

</body>
</html
阅读 4.8k
4 个回答

按照这样是可以的,代码如下:

function aa() {
        var n = 3;
        var rotate = 60 * n + 1080;

        //注意这里!!!
        var keyframe = "#pointer{animation: run 2.5s linear forwards;-webkit-animation: run 2.5s linear forwards;}";
        keyframe += "@-webkit-keyframes run{0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}\n" +
            "100%{transform:rotate(" + rotate + "deg);-webkit-transform:rotate(" + rotate + "deg);}}";
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = keyframe;
        document.querySelector('head').appendChild(style);
    }

你那里面是不是写错了。run{0deg 应该是run{0%

我现在在ios也出现这个问题了 没安卓机没有出现这个问题, 你找出问题了吗

图片描述

clipboard.png

一定要这种写法,转动后删除id="pointer"标签的属性(class='pointer')

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题