iOS Safari приостанавливает анимацию на window.location.href = ...? - PullRequest
Новая
       19

iOS Safari приостанавливает анимацию на window.location.href = ...?

0 голосов
/ 15 мая 2019

У меня есть следующий код из https://codepen.io/anon/pen/ZNLyGe, который отображает анимацию панели ожидания, когда пользователь нажимает значок, чтобы перейти к другой части того же веб-сайта.

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

1 Ответ

1 голос
/ 16 мая 2019

В конце концов, я использовал это, что отлично сработало в веб-приложении / сайте iOS «Сохранить на главном экране». 

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

Я, вероятно, наткнулся на этот вопрос в то время Почему isnt window.location.href = не переадресовывать на страницу с помощью Safari?

Посмотрите, как это работает для меня здесь https://dev.joshmoto.wtf/unearth.ed/wp/ ... Я виновен в том, что не предварительно загрузил замечательный вращатель, поэтому иногда вращатель не рендерится вовремя перед переходом на следующую страницу. Но ваша анимация - чистый CSS, поэтому проблем не должно быть.

...