触发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/