iOS Safari 在 window.location.href = ... 上暂停动画？

Question

我有来自https://codepen.io/anon/pen/ZNLyGe 的以下代码，当用户单击图标导航到同一网站的另一部分时，它会显示等待栏动画。

onclick Javascript 使用：

window.location.href = strNewURL;

它在桌面浏览器上运行良好，但在 iOS 上，Safari 会在动画到达 window.location.href 行时立即冻结。

有没有办法阻止 iOS Safari 停止该动画？

HTML

<div class="dvProgressBarInfinite" id="dvIDProgressBarInfinite">
    <div class="indeterminate"></div>
</div>

CSS

/* Progress Bar */
.dvProgressBarInfinite {
    position: absolute;
    height: 2px;
    display: block;
    width: 100%;
    background-color: #cfcfcf;
    border-radius: 2px;
    background-clip: padding-box;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
}

.dvProgressBarInfinite .indeterminate {
    background-color: #000000;
}

.dvProgressBarInfinite .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.dvProgressBarInfinite .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

JAVASCRIPT

function fJToolbar2Click(intColumnNumber)
{
    var strURL = "<%=strClsToolbar2URLPrefix%>";
    var strURLSuffix = "";

    switch(intColumnNumber) {
        case 1:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(1)%>';
            break;
        case 2:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(2)%>';
            break;
        case 3:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(3)%>';
            break;
        case 4:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(4)%>';
            break;
        };

    fJProgressIndeterminateShow();

    setTimeout(function (){
    window.location.href = strURL + strURLSuffix;  
    }, 200);        

}    

function fJProgressIndeterminateShow()
{       
   var dv1 = document.getElementById("dvIDProgressBarIndeterminate");
   dv1.style.display="inline-block";        
}

Answer 1

我最终使用了这个，它在“保存到主屏幕”iOS webapp/site 中非常适合我。

setTimeout(function(){
    window.location.href = strNewURL;
}, 200);

我当时可能偶然发现了这个问题Why isnt window.location.href= not forwarding to page using Safari?

在这里看到它对我有用https://dev.joshmoto.wtf/unearth.ed/wp/ ...我对没有预加载 fontawesome 微调器感到内疚，所以有时微调器在跳到下一页之前没有及时渲染。但是您的动画是纯 css，所以应该不是问题。