iOS Safari在window.location.href = ...上暂停动画 [英] iOS Safari pauses animation on window.location.href = ...?

问题描述

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

I have the following code from https://codepen.io/anon/pen/ZNLyGe which displays an waiting-bar animation when the user clicks an icon to navigate to another part of the same website.

onclick Javascript使用:

The onclick Javascript uses:

window.location.href = strNewURL;

它在桌面浏览器上可以正常工作，但在iOS上，Safari会在到达window.location.href行时立即冻结动画.

It works fine on desktop browsers but on iOS, Safari freezes the animation as soon as it hits the window.location.href line.

有什么方法可以阻止iOS Safari停止播放该动画吗?

Is there some way to prevent iOS Safari from stopping that animation?

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

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";        
}

推荐答案

最后，我使用了此功能，在保存到主屏幕" iOS webapp/站点中对我非常有用.

I used this in the end which worked for me nicely in 'save to home screen' iOS webapp/site.

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

我可能在在这里 https://dev.joshmoto.wtf/unearth上查看对我有用. ed/wp/ ...我对未预加载fontawesome微调器感到内so，因此有时微调器在跳至下一页之前无法及时渲染.但是您的动画是纯CSS，因此应该没有问题.

See it working for me here https://dev.joshmoto.wtf/unearth.ed/wp/ ...I'm guilty of not preloading fontawesome spinner so sometimes the spinner does not render in time before skipping to next page. But your animation is pure css so should not be a problem.

这篇关于iOS Safari在window.location.href = ...上暂停动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！