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

Question

here's a jsfiddle :

https://jsfiddle.net/20zhrw1o/

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

也可以使用 scrollreveal 插件来实现吗？

Answer 1

CSS动画很难通过JavaScript直接控制（https://css-tricks.com/restart-css-animation/），所以最好在[=中添加和删除CSS类 21=] 动画.

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/

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

Trigger svg line animation on screen view and reset it off screen view

javascript

svg

css-animations

scrollreveal.js