Question

我需要你的帮助

我为网站创建了一个预加载屏幕，徽标SVG动画进行得很好，但我唯一与之混淆的是：每次重新加载时，动画都不会发生，但加载器的3秒钟功能正常。

代码如下：

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

Answer 1

正在缓存图像。动画完成后，它将保持在该状态下进行缓存。

可能的解决方案：

考虑在HTML中内联SVG，或者
强制浏览器每次重新加载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是不同的文件。

Answer 2

这不是答案。对其进行长时间的评论。

在您的代码中，您有许多动画，如下所示：

@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代码的，脚本无法正常工作。

也许您需要看一下已有的脚本，也许您应该首先仅使用一个多边形对其进行测试。

使用Javascript重新加载后如何重复SVG动画

2 个答案: