Анимировать div, когда родительский раздел виден на свитке

Question

У меня это сработало, но, похоже, я все испортил по пути.

Я использую хай-джек прокрутки, который будет приводить пользователя к новому разделу / карточке при каждой прокрутке.

Он добавляет видимый класс каждый раз, когда пользователь выполняет прокрутку к новому разделу / карте.

Я использовал это в качестве базы https://codyhouse.co/gem/page-scroll-effects

<section class="cd-section visible">
  <div>
    <h2>Page Scroll Effects</h2>
  </div>
</section>

Затем, когда пользователь прокручивает до нового раздела, он удаляет и добавляет видимое к следующему разделу.

В настоящий момент я анимирую основной контент, например текст героя и т. Д. Для каждого раздела.

<section class="cd-section visible">
  <div class="home__content-slide-right">
    <h2>Page Scroll Effects</h2>
  </div>
</section>

Я использую имя класса; home__content-slide-right здесь, чтобы анимировать этот текст с помощью трансформации на данный момент, что вы можете увидеть ниже;

.home__content-slide-right {
   transform: translateX(-50px);
}

Как я это делал, покупал, просто добавляя .видимый для CSS, который вы можете видеть ниже;

.visible .home__content-slide-right {
  transform: translateX(0);
}

Это работало так, что когда я прокручивал до каждой страницы воспроизводимую анимацию, но теперь она, кажется, работает только один раз, когда вся страница загружена ивот и все.

Я пытался удалить что-то, но пока не повезло, просто интересно, есть ли у кого-то еще причина, по которой он не работает.

------ Редактировать ------

Я добавил несколько изображений ниже, чтобы вы могли увидеть, в чем заключается моя проблема.

Это первое изображение с разделом, имеющим класс .visible , поэтому анимация должна воспроизводиться.

Хотя, как вы можете видеть, когда я покидаю раздел и класс .visible удален , CSS остается прежним.

Answer 1

Похоже, у вас есть "видимый" класс, применяемый к родительскому элементу вашей целевой секции.

Ваш css:

.visible .home__content-slide-right {
  transform: translateX(0);
}

написано так, что любой родитель этого элемента с классом .visible будет применять это правило css. Если вы хотите убедиться, что это срабатывает только тогда, когда видимый добавлен в тот же раздел, переписать CSS следующим образом:

section.visible .home__content-slide-right {
  transform: translateX(0);
}

Или убедитесь, что ни к одному родительскому элементу не применен видимый класс, если он не нужен.