Question

我最近问过this question关于从主屏幕图标运行后睡眠/恢复后jQuery动画无法在iPad上运行的问题。自从我提出这个问题以来的两周内，这个问题得到了零评论和零答案。

我花了一些时间进行调查，创建小测试以了解哪些有效，哪些无效 - 并确认jQuery在这里没有错，而是移动Safari。

我创建了这个简单的测试：http://jsfiddle.net/87r3vfe1/ - 根本不使用jQuery而是使用普通的javascript和CSS过渡动画。这在真正的野生动物园中完全正常 - 直接和睡眠/恢复后 - 在刚开始时从主屏幕图标开始工作。但是在睡眠/恢复之后，过渡动画不再起作用了 - 屏幕只是在指示的延迟后改变。

所以，似乎我确实在手机游戏中发现了一个错误。有没有人对解决方法有任何想法？

这里是小提琴的代码。

HTML：

<div id="parent">
    <div id="child1">
        <div class="button" id="button1">Animate</div>
    </div>
    <div id="child2">
        <div class="button" id="button2">Animate</div>
    </div>
</div>

CSS：

body {
    margin: 0px;
    padding: 0px;
}

#parent {
    width:100%;
    height:300px;
    position: relative;
}

#child1 {
    position: absolute;
    width:100%;
    height:100%;
    left: 0px;
    background-color: yellow;
    transition: left 400ms ease-in-out;
    -webkit-transition: left 400ms ease-in-out;
}

#child2 {
    position: absolute;
    width:100%;
    height:100%;
    left:100%;
    background-color: red;
    transition: left 400ms ease-in-out;
    -webkit-transition: left 400ms ease-in-out;
}

.button {
    border: solid 1px black;
    text-align: center;
    width: 100px;
    padding: 10px 20px;
    background-color: lightGrey;
    cursor: pointer;
}

使用Javascript：

document.onload = function() {
    document.getElementById('button1').onclick = function() {
        document.getElementById('child2').style.left = '0px';
        document.getElementById('child1').style.left = '-100%';
    };

    document.getElementById('button2').onclick = function() {
        document.getElementById('child1').style.left = '0px';
        document.getElementById('child2').style.left = '100%';
    };
};

Answer 1

原来，这与iOS 8中的另一个错误相关（或由其引起），this question

iOS 8.1.1更新修复了此错误，因此iOS 8.1.1过渡动画可以再次正常运行。

从主屏幕运行后睡眠/恢复后，CSS转换在iPad上不起作用

1 个答案: