Question

我的加载屏幕使用css关键帧动画为svg路径设置动画。一旦页面加载，我最初使加载屏幕消失。但是，在某些计算机上，加载器会在它完成动画之前消失，这会让你想知道它是什么。为了整理这个，我决定在动画完成后让加载屏幕消失。

我使用jQuery来检测动画何时完成。目前，它控制台会记录一条消息，表明它已完成。但是，动画结束后，该消息会持续一段时间。

任何人都可以帮我找出为什么延迟时间太长以及如何让它更快上班。

HTML

<svg version="1.1" id="wrapper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path id="path" class="path" fill="none" stroke="#4b4949" stroke-width="1" stroke-miterlimit="1" stroke-linecap="round" stroke-linejoin="round"  d="M100,259c3.8-4.9,16.5-5.1,33.1-3.3c3,0.3,6.1,0.1,8.9-0.9c2.9-1,5.3-2.5,6.3-4.7c0.6-1.1-0.6-2.4-1.7-2
c-2.3,0.8-3.7,3.6-3.5,6.7c0.3,4,3.9,6.8,7.9,6.5c6-0.5,14.1-3,25.6-7.6c0.1,0,0.1,0.1,0.1,0.1c-3.3,2.9-3.1,4.8,0.3,6.1
c1.1,0.4,2.3,0.6,3.5,0.6c9.4,0.1,11.4-8.1,8.1-9.7c-0.6-0.3-1.3,0.1-1.5,0.8c-0.8,3.6,1.3,4.9,7.9,4.4c9.5-1.8,18.5-6.2,24-5
c-5,2.7-6.3,6.8-3.1,10.1c1.3,1.4,3.4,1.8,5.1,1.1c3.2-1.3,4.6-4.2,4.2-8.8c2.2,16.8,27.8-4.7,39.7-2.3h4.2c-5.1-0.1-8.3,3.9-7,7.3
c0.5,1.4,2.1,2.2,3.6,2c6.1-0.7,6.7-8.7,5.4-15.8c-0.1-0.7-1.1-0.9-1.4-0.3c-6.3,9.6,17.4,30.1,30.6,7.7c3.4,8.7,12.2,8.7,26.3,0
v4.9c0,0.2,0.2,0.2,0.3,0.1c3.8-7.3,7.9-9.3,9-6.9c0.2,6.8,3.2,9,9.1,7c1.4-0.5,2.7-0.9,4.1-1.3l20.4-4.6c0,0,0,0,0,0.1
c-3.6,2.5-4.7,4.2-2.7,6.3c1.1,1.2,2.9,1.5,4.4,0.9c4.4-1.7,5.4-4.8,4-8.9c2.2,10.8,1.9,18-2.7,18.9c-1,0.2-2,0-2.7-0.7
c-2-2,0.7-5.2,5.1-7.6c4.4-2.3,9.4-3.2,14.4-2.6c7.9,0.8,19.2,2.5,26-6.3"/>
<path fill="none" class="path2" stroke="#4b4949" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M301.1,244.6c-0.3,0.5-0.4,1.1-0.3,1.7"/>
</svg>

CSS

#wrapper{
width:100%;
height:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}

#path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 12s forwards;
} 

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.path2 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash2 12s 0s forwards;
} 

@keyframes dash2 {
  40% {
    stroke-dashoffset:1001;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

JQuery的

function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}
var $animationname = $('.path');

var animationEvent = whichAnimationEvent();

$( document ).ready(function() {

        $animationname.one(animationEvent,
               function(event) {

     console.log("animation has ended");
   });

    });

我如何在最后摆脱CSS动画延迟

0 个答案: