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

【问题标题】：Trigger svg line animation on screen view and reset it off screen view在屏幕视图上触发 svg 线动画并将其重置为屏幕视图
【发布时间】：2017-09-01 03:53:24
【问题描述】：

here's a jsfiddle :

https://jsfiddle.net/20zhrw1o/

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

也可以使用 scrollreveal 插件来做到这一点吗？

【问题讨论】：

当您添加小提琴链接时，请不要试图破坏您在问题中提供实际代码的stackoverflow检查。

标签： javascript svg css-animations scrollreveal.js

【解决方案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/

【讨论】：

谢谢！正是我想要的，以及以后使用的有用链接