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

滚动时延迟SVG动画

1 个答案: