使用 ScrollReveal 在 SVG 的某些部分设置动画答案

【问题标题】：Using ScrollReveal to animate in parts of SVG使用 ScrollReveal 在 SVG 的某些部分设置动画
【发布时间】：2021-09-07 01:47:18
【问题描述】：

我正在使用ScrollReveal library 在我的网站部分中制作动画。

我有一个相当复杂的vector，其中包含五个组。我正在尝试使用这个库分别为这五个组设置动画。

这是我目前的做法：

我的 SVG 有点长，而且 Stack 有正文字符数限制，所以我使用 JSFiddle here 创建了一个演示。

每个组都有一个类，从演示中可以看出，它最初加载，然后消失。任何显示效果都不起作用？我有其他 divs 具有相同的参数，但由于某种原因它不适用于此 SVG？

如果我们检查空白区域，我可以看到这些部分没有出现，因为 opacity 是 0。但是，在滚动时，这个 opacity 没有改变，我不想通过 CSS 将 opacity 强制为 1，因为我希望该部分很好地淡入，而将其设置为 1 只会使其成为静态图像。

【问题讨论】：

标签： javascript jquery svg scrollreveal.js

【解决方案1】：

我遇到了同样的问题。我无法弄清楚如何直接使用 ScrollReveal 使不透明度起作用，所以我最终使用 ScrollReveal 来检测滚动位置，然后触发回调函数来切换类。它不需要太多 CSS，但确实需要一点点。

以我的代码的通用版本为例：

@ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

svg {
    .class-one {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
    .class-two {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
    .class-three {
        opacity: 0;
        transition: opacity 8000ms @ease-out-expo;
        &.visible {
            opacity: 1;
        }
    }
}

    (function($) {
        // Reveal the block
        ScrollReveal().reveal(".container", {beforeReveal: showGraphic, viewFactor: 0.3});
        
        // Define the showGraphic function
        function showGraphic() {
            $(".container svg .class-one").addClass( "visible" );
            
            setTimeout(function() {
                $(".container svg .class-two").addClass( "visible" );
            }, 1800);
            
            setTimeout(function() {
                $(".container svg .class-three").addClass( "visible" );
            }, 3600);
            
        }
        
    }(jQuery))

【讨论】：