在屏幕视图上触发svg线动画并将其重置为屏幕视图

Question

here's a jsfiddle :

https://jsfiddle.net/20zhrw1o/

正如标题所说，我想在屏幕视图中触发线条动画并重置它，这样如果我向后滚动动画再次开始动画，我不擅长js所以感谢任何帮助！

还可以使用scrollreveal插件吗？

Answer 1

CSS动画难以通过JavaScript（https://css-tricks.com/restart-css-animation/）直接控制，因此最好添加和删除CSS类以启动/重置动画。

path {
    stroke: #000;
    stroke-width:2px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
svg.in-view path {  
    animation: dash 20s linear forwards;
}

在每个scroll事件中，查看SVG是否在屏幕上：

window.addEventListener('scroll', function(e) {
    svg.classList.toggle('in-view', isElementInViewport(svg));
});

https://jsfiddle.net/20zhrw1o/1/