觸發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/