Как повторить SVG анимацию после перезагрузки с использованием Javascript - PullRequest
Новая
       34

Как повторить SVG анимацию после перезагрузки с использованием Javascript

3 голосов
/ 11 апреля 2019

Мне нужна ваша помощь

Я создал экран предварительной загрузки для веб-сайта, и анимация SVG логотипа идет хорошо, но единственная часть, с которой я запутался, заключается в следующем: каждый раз, когда я перезагружаюсь,анимация не происходит, но 3 секунды загрузчик работает.

Вот сайт: http://itsrev.io

вот код: 

var loaderScreen;

  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("banner").style.display = "block";
  }

  function loadingFunction() {
    loaderScreen = setTimeout(showPage, 4000);
  }

CSS: 

 /**************************************
    Preloader
    ***************************************/
    #loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #banner {
      display: none;
    }

    /* Add animation to "page content" */
    #banner {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 }
      to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
      from{ bottom:-100px; opacity:0 }
      to{ bottom:0; opacity:1 }
    }

Ответы [ 2 ]

3 голосов
/ 11 апреля 2019

Изображение кэшируется. После завершения анимации она остается в кэше в этом состоянии.

Возможные решения:

  1. Подумайте о включении SVG в ваш HTML или

  2. Принудительно каждый раз перезагружать SVG. это можно сделать, установив на сервере заголовки управления кэшем для файла SVG. Или вы можете использовать javascript на странице, чтобы каждый раз менять URL-адрес изображения.

Например, что-то вроде следующего: 

<div id="loader">
  <img width="400"/>
</div>


function loadingFunction() {
  var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
  document.querySelector("#loader img").setAttribute("src", url);
  loaderScreen = setTimeout(showPage, 4000);
}

Браузер показывает, что logo?r=12345 отличается от logo?r=98765.

2 голосов
/ 11 апреля 2019

Это не ответ.Примите это как длинный комментарий.

В вашем коде у вас есть много анимаций, выглядящих так: 

@keyframes whatever {
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

Обратите внимание, что после 100% приходит 0%.Также: код очень многословен с одной анимацией, подобной этой, на каждый полигон.

В вашем коде есть другой вид анимации, похожий на этот: 

@keyframes whatever2 {
  0% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  62.50% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  75% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
  100% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
}

Я думаю, что вы создали код CSS динамически, и ваш скрипт не работает должным образом.

Возможно, вам следует взглянуть на имеющийся у вас скрипт. Возможно, вам следует сначала протестировать его только с одним полигоном.

...