Как remove и add сделать плавным?

Question

[Alexander9292]

Есть сайт - sniper24.beget.tech/ambassador
В оффере изначально существует 5 кругов, которые при скролле переходят на секцию ниже


Необходимо сделать плавное удаление и добавление класса с помощью скрипта.
Как можно это реализовать плавно или есть какая-то альтернатива?

Сам скрипт:

const benefitsScroll = () => {
        window.addEventListener('scroll', () => {
            let scrollDistance = window.scrollY;

            document.querySelectorAll('.header, .offer, .benefits').forEach(item => {
                if (item.offsetTop >= document.querySelector('.benefits').clientHeight <= scrollDistance) {
                    document.querySelectorAll('.benefits-item .benefits-item__image').forEach(item => {
                        if (item.classList.contains('benefits-item__image')) {
                            item.classList.remove('benefits-item__image--active');
                        }
                    });
                } else if (item.offsetTop <= document.querySelector('.benefits').clientHeight <= scrollDistance) {
                    document.querySelectorAll('.benefits-item .benefits-item__image').forEach(item => {
                        if (item.classList.contains('benefits-item__image')) {
                            item.classList.add('benefits-item__image--active');
                        }
                    });
                }
            });
        });

        if (screen.width <= 760) {
            document.querySelectorAll('.benefits-item__image--active').forEach(item => {
                item.classList.remove('benefits-item__image--active');
            });
        }

    };
    benefitsScroll();

Comments

[Rsa97]

Класс нельзя удалить плавно. Он либо есть, либо нет.

[Alexander9292]

Rsa97, какая альтернатива?

[Сергей delphinpro]

Alexander9292, переформулировать вопрос для начала. Тогда самому станет ясно, что не класс нужно сделать плавным, а изменение какого-то свойства. Плавность изменения свойств достигается применением перехода (transition), если свойство относится к группе анимируемых.

Answer 1

[Сергей Горячев]

css transition в данном случае должен подойти.
Добавляемому классу сделать плавное появление.

PS: Наложение блоков на кнопку смотрится стрёмно)


PPS: А вообще, круто смотрелся бы такой сценарий.
Прокручивается страница, а эти 4 круга стоят на месте, но когда оним своим центром докручиваются до черных блоков снизу, круги приклеиваются к этим черным блокам и дальше страница скролится как обычно.

Answer 2

[Сергей delphinpro]