Как использовать анимацию с AOS на псевдоэлементе?

Question

Обычно в HTML файле я использую AOS следующим образом

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

Я пытаюсь по-другому использовать AOS с псевдоэлементом в моем CSS файле, но я делаю это неправильно. У вас есть идея, как я могу это сделать? Спасибо за вашу помощь

 &::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), но, основываясь на чтении документов и CSS Tricks post , думаю, это можно сделать.

Вот что делает AOS, JavaScript -wise:

Идея AOS проста: наблюдать за всеми элементами и их позициями в зависимости от настроек, которые вы им предоставляете. Затем добавьте / удалите класс aos-animate. Конечно, на практике это не всегда так просто, но идея AOS так проста. Каждый аспект анимации обрабатывается CSS.

Исходя из исходного кода для 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 может быть переведен.