javascript - 我希望我的元素淡入淡出，然后页面关闭并加载另一个页面

Question

不确定是否可行，但我想实现以下目标:

我的带有“.splashscreenlogo”类的元素在文档准备好时显示，我希望它在淡出之前显示 2.5 秒，然后我的带有“.scene”类的元素再淡入 3在它再次淡出之前的几秒钟。完成后，整个页面将重定向到另一个 html 页面。

当前 html:

<div class="scene">
  <svg 
  version="1.1" 
  id="dc-spinner" 
  xmlns="http://www.w3.org/2000/svg" 
  x="0px" y="0px"
  width:"38"
  height:"38"
  viewBox="0 0 38 38" 
  preserveAspectRatio="xMinYMin meet"
  >
  <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
     <animate 
       attributeName="opacity"
       values="0;1;0" dur="1.8s"
       repeatCount="indefinite"/>
  </text>
  <path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20
            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
  <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 20 20"
        to="360 20 20"
        calcMode="spline"
        keySplines="0.4, 0, 0.2, 1"
        keyTimes="0;1"
        dur="2s"
        repeatCount="indefinite" />      
   </path>

  <path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20
  c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
  C12.875,32.922,7.078,27.125,7.078,20z">
   <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 20 20"
      to="360 20 20"
      dur="1.8s"  
      repeatCount="indefinite" />
    </path>
  </svg>
</div>

<div class="splashscreenlogo">
  <img src="logo_splashscreen.png" alt="Splashscreen logo" style="width:100%;height:auto">
</div>

我的 CSS:

html {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
html body {
  background: url("Splashscreen.png") no-repeat;
  background-size: 100%;
  font: 14px/21px Monaco, sans-serif;
  color: none;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  height: 100%;
  min-height: 100%;
}
html body a, html body a:visited {
  text-decoration: none;
  color: #FFffF;
}
html body h4 {
  margin: 0;
  color: #666;
}

.scene {
  width: 100%;
  height: 100%;
  -webkit-perspective: 600;
          perspective: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.scene svg {
  width: 240px;
  height: 240px;
}
.splashscreenlogo{
  position: absolute;
  top: 46%;
  left: 36%;
}

如有任何帮助，我们将不胜感激!

Answer 1

假设你在标签中提到了 JQuery，

用它来实现你想要的。

$(document).ready(function() {
    //hiding initially
    $('.scene').hide();
    //Fade In and delay 2.5 sec then Fade Out
    $('.splashscreenlogo').hide().fadeIn(function() { 
        $(this).delay(2500).fadeOut(function() {
            //Fade In and delay 3 sec then Fade Out
            $('.scene').fadeIn(function() { 
                $(this).delay(3000).fadeOut(function() {
                    //Redirect to any location
                    alert('redirecting to page');
                    window.location = 'http://google.com';
                }); 
            });
        }); 
     }); 
});