javascript - 如何在伪元素上使用 AOS 动画？

Question

通常在 HTML 文件中我像这样使用 AOS

<li data-aos="fade-left" class="fields__box">

我尝试以不同的方式在 CSS 文件中使用 AOS 和伪元素，但我没有这样做。你知道我该怎么做吗？感谢您的帮助

 &::before {
        content: "";
        position: absolute;        
        background-image: url(images/logoBig.png);
        z-index: -1;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: center bottom;
        // data-aos="fade-up";
    }

Answer 1

我之前没有使用过 Animate on Scroll (AOS)，但基于阅读 docs和 CSS Tricks post ，我认为可以做到。

以下是 AOS 在 JavaScript 方面正在做的事情:

The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate. Of course, in practice, it’s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.

基于source code对于fade-up动画，你可以尝试:

<li data-aos="fade-before-up" class="fields__box">

&::before {
    /* ... your properties to style the before element ... */
    transition-property: opacity, transform;
    opacity: 0    
    transform: translate3d(0, 100px, 0);
}

&.aos-animate::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

要点:

• 我还没有测试过这个。对不起。如果您想创建一个 CodePen 或 JSFiddle 来复制您所看到的当前行为，我会看看是否可以调整它。
• data-aos HTML 元素上的属性不应与实际的 AOS 动画匹配。只是为了让图书馆把aos-animate元素上的类。
• ::before伪元素最初的样式为 0 不透明度和 100px 下面。当 AOS 添加 aos-animate 时类到 <li> ，然后 ::before元素可以转换。