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

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';
                }); 
            });
        }); 
     }); 
});

Answer 2

您也可以尝试使用 SVG 的 onend 事件和 repeatCount 组成一个计数器来调用重定向函数，如下所示：

<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">
   <script src="text/javascript">
    <![CDATA[
    function redirect()
    {
      alert("Redirecting.");
    }
   ]]>
  </script> 
  <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="2" onend="redirect()"/>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20c0-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,20c0-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.203C12.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>

DEMO Here

您也可以尝试修改 animate 标记中的 dur 和 repeatCount 属性以满足您的要求。

Answer 3

当动画准备好后，您可以使用 javascript 转到其他页面。

 $(document).ready(function(){
    setTimeout(function(){
     window.location = 'https://www.google.com/';
    },3000);
 })

    /*
    for the time I have choosen a random time. 
    note that the time is in miliseconds 
    one sec has 1000 ms.
    */

我为此使用了 Jquery，因为我不知道如何检测页面就绪，但您可以搜索该页面并将其应用于您的代码。

您必须计算动画的总时间并将 500 毫秒替换为您的时间