Flash Screen в Chrome при использовании наложения / исчезновения Animsition - PullRequest
Новая
       70

Flash Screen в Chrome при использовании наложения / исчезновения Animsition

0 голосов
/ 14 октября 2019

Я пытаюсь сделать переходы страниц для веб-сайта, но у меня вспыхивает белый экран между двумя переходами. Переходы состоят из первого наложения и затем постепенного появления. Для этого я использую Animsition и Fullpage.js. Проблема в том, что он отлично работает на Edge. Более того, иногда экран флэш-памяти не появляется.

То, что я пробовал

Сначала я понял, что это проблема, потому что я работал над своими локальными документами. Когда я переключился на локальный сервер, он работал отлично. Однако, когда я загрузил сайт, то увидел, что экран флэш-памяти все еще там.

  • Animsition - совместимость с полной страницей : я проверил, была ли проблема совместимости с полной страницей. JS. Я провел некоторый тест, и обе библиотеки отлично работают вместе.
  • Несколько переходов : так как я использую один переход для анимации выхода, а другой для постепенного появления, я подумал, что были некоторые ошибкиили неправильное взаимодействие между этими двумя. И это может быть случай: когда я только добавляю постепенное увеличение, у меня не появляется флэш-экран во время перехода. Но когда я добавляю анимацию наложения-выдвижения, я вижу белую вспышку. Так что ошибки должны быть в этой части, но я действительно не знаю, где. Я следовал учебнику из animsition.js.

  • Добавление removeClass в конце функции javascript, как подробно описано в другом посте. Но это не сработало: 

    .one('animsition.inStart',function(){
      $('body').removeClass('bg-init');
});

РЕДАКТИРОВАТЬ

Я не исправил это должным образом, но я «покрасил» белую вспышку цветом наложения,с: .animsition-overlay-slide {background-color: #000;} и теперь он работает нормально.

Мой код

Нажав на стрелки (изображения в моей локальной папке) в левой части экрана (под этим тестом. ..), наложение должно появиться и переход начнется. Первый слой появляется, но затем появляется флэш-экран.

По некоторым причинам он работает на codepen. https://codepen.io/arthurdraws/pen/OJJNWXe

    // FADE IN
    $(document).ready(function() {
        $(".animsition-fade").animsition({
          inClass: 'fade-in',
          outClass: 'fade-out',
          inDuration: 1000,
          outDuration: 300,
          linkElement: '.animsition-linkfade',
          // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
          loading: true,
          loadingClass: 'animsition-loading',
          loadingInner: '', // e.g '<img src="loading.svg" />'
          timeout: false,
          timeoutCountdown: 5000,
          onLoadEvent: true,
          browser: [ 'animation-duration', '-webkit-animation-duration'],
          // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
          // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
          overlay : false,
          overlayParentElement : 'body',
          transition: function(url){ window.location.href = url; }
        });
    });
    // OVERLAY
    $(document).ready(function() {
        $('.animsition-layer').animsition({
            inClass: 'overlay-slide-in-top',
            outClass: 'overlay-slide-out-top',
            inDuration: 0,
            outDuration: 420,
            overlay : true,
            overlayClass : 'animsition-overlay-slide',
            overlayParentElement : 'body'
        })
          // ADD THE PART "removeClass"
    });

    // FULLPAGE JS
    new fullpage('#fullPage', {
        autoScrolling: true,
        navigation: true,
        responsiveWidth: 1100,
        //showActiveTooltip: true
        //continuousVertical: true,
        //scrollingSpeed: 1000
    })
    
@import url('https://fonts.googleapis.com/css?family=Hind:400,500&display=swap');

body, html{
    padding: 0;
    margin: 0;
    font-family: 'Hind', sans-serif;
}

/* OVERLAYS COLORS */
.bg-structure{
    background-color: #000;
}
@media screen {
    body > .bg-structure{
        background: #000;
        z-index: 999;
    }
}
.bg-left{
    background-color: #030b24;
}
@media screen {
    body > .bg-left{
        background: #030b24;
        z-index: 999;
    }
}

.bg-right{
    background-color: #63012f;
}
@media screen {
    body > .bg-right{
        background: #63012f;
        z-index: 999;
    }
}

/* TEXT */
h2{
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: white;
}
h4{
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: capitalize;
    color: white;
}


/* HEADING UNDERLINE USED FOR GRID AND FULLPAGE */
.heading-underline {
    background-color: white;
    margin: 2rem auto 2rem;  /*--- center --*/
    width: 80px;
    height: 2px;
}


/* FULLPAGE */
.fullpage .fp-right{
    margin-right: 1.8rem !important;
}
.fullpage span{
    background: white !important;
}
.fullpage .title{
    width: 20rem;
    padding-top: 1.2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    z-index: 2;
    position: fixed;
}
.fullpage h2{
    padding-bottom: 1.5rem;
}
.fullpage h4{
    padding-top: 1rem;
}
.fullpage .title img{
    margin-top: 3rem;
    width: 15px;
    opacity: 0.5;
    cursor: pointer;
}
.fullpage .title .arrowleft img{
    float: left;
}
.fullpage .title .arrowright img{
    margin-left: 6rem;
}
.fullpage .title img:hover{
    opacity: 1;
    transition: .1s ease-in-out;
}
.fullpage .title .heading-underline{
    margin: 0;
    width: 7.8rem;
    height: 3px;
}
.fullpage .page img {
    display: block;
    outline-offset: -1px;
    outline: 2rem solid white;
    margin-left: auto;
    margin-right: auto;
}
.fullpage .page .landscape img {
    height: calc(100% - 6rem - 4rem);
    max-width: calc(100% - 40%-1rem - 4rem);
}
.fullpage img.noborder{
    outline-offset: 0px;
    outline: 0rem solid white;
}

/*-------------------------------------------------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------   CLOSE BUTTON   ------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.close {
    z-index: 2;
    position: absolute;
    right: 3rem;
    top: 3.2rem;
    width: 32px;
    height: 32px;
    opacity: 0.5;
}
.close:hover {
    opacity: 1;
}
.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}
.close:hover::before, .close:hover:after{
    transition: .1s ease-in-out;
}

.fullpage .close:before, .fullpage .close:after{
    background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <meta http-equiv="X-UAV-Compatible" content="ie=edge">
    <title>Arthur</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.css" integrity="sha256-3IkGqGYOvq1Ype2MXFwVJFeBtBACgiveho3SacOEEP8=" crossorigin="anonymous" />
    <link rel="stylesheet" href="../dist/css/style.css">
    <link rel="stylesheet" href="../dist/css/color.css">

    <!-- animsition.css -->
    <link rel="stylesheet" href="https://unpkg.com/animsition@latest/dist/css/animsition.min.css">
  
</head>

<body class="fullpage bg-structure">
  
    <div class="animsition animsition-fade" data-animsition-in-class="fade-in" data-animsition-in-duration="1000" data-animsition-out-class="fade-out" data-animsition-out-duration="0">
            <div class="title animsition-layer" data-animsition-overlay="true">
                <h2>TEST</h2>
                <div class="heading-underline"></div>
                <h4>this is a test<br>button to<br>animate overlay</h4>
                <a  href="#" class="animsition-link arrowleft" data-animsition-out-class="overlay-slide-out-left bg-left" data-animsition-out-duration="300">
                    <img src="../img/arrowleft.svg">
                </a>
                <a href="#" class="animsition-link arrowright" data-animsition-out-class="overlay-slide-out-right bg-right" data-animsition-out-duration="300">
                    <img src="../img/arrowright.svg">
                </a>
        
            </div>
        
            <div id="fullPage" class="page">
                <div class="section landscape fp-auto-height-responsive">
                    <img src="https://source.unsplash.com/user/erondu/1600x900">
                </div>
                           <div class="section landscape fp-auto-height-responsive">
                    <img src="https://source.unsplash.com/user/erondu/1600x900">
                </div>
                           <div class="section landscape fp-auto-height-responsive">
                    <img src="https://source.unsplash.com/user/erondu/1600x900">
                </div>
            </div>
      
               
            <!-- close button -->
            <div class="animsition-layer" data-animsition-overlay="true">
                <a href="../photo.html" class="animsition-link close" data-animsition-out-class="overlay-slide-out-bottom bg-white" data-animsition-out-duration="250"></a>
            </div>
    </div>



  <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- animsition.js -->
    <script src="https://unpkg.com/animsition@latest/dist/js/animsition.min.js"></script>
    <!-- script Java -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script>


</body>


</html>
...