css - 滚动时延迟 SVG 动画

Question

我正在尝试延迟 SVG 动画的启动。这里有一个链接 https://jsfiddle.net/h0bLgc2q/1/

<svg version="1.1" id="line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="20px" xml:space="preserve">
  <path class="line-delay" fill="none" stroke="black" stroke-width="1" stroke-dasharray="10,10" d="M5 10 l200 0"></path>
</svg>
.line-delay {
  stroke-dasharray: 200;
  animation: draw-svg 3s linear normal;
}

@keyframes draw-svg {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

但是我想在用户滚动到这一行时开始动画。所以我不明白该怎么做。

Answer 1

基于此answer ，我已根据您想要获得的内容修改了代码。现在当您滚动时动画开始。

结果:Jsfiddle

function isElementInViewport(elem) {
var $elem = $(elem);

// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();

// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();

return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() { 
var $elem = $('svg .line-delay');

// If the animation has already been started
if ($elem.hasClass('start')) return;

if (isElementInViewport($elem)) { 
    // Start the animation
    //$elem.addClass('start'); 
    $elem.attr("class", "line-delay start");
}
}

// Capture scroll events
$(window).scroll(function(){

  checkAnimation();
});