在滾動條上顯示父節時對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);
}

我的操作方式是購買，只需將.visible附加到CSS（您可以在下面看到）；

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

這樣做是可行的，所以當我滾動到播放的每個頁面時，動畫都可以播放，但是現在似乎只有在加載整個頁面時才可以運行一次。

我曾經嘗試刪除一些東西，但到目前為止還沒有運氣，只是想知道這里是否有人有理由不工作。

------ 編輯 ------

我在下面添加了一些圖像，以便您可以了解我的問題。

該第一張圖片的節帶有.visible類，因此應播放動畫。

雖然如您所見，當我離開本節並刪除 .visible類時，css保持不變。

Answer 1

看起來您已將“ visible”類應用於目標部分的父元素。

您的CSS：

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

進行編寫，以便具有.visible類的該元素的任何父級都將應用此CSS規則。 如果要確保僅在將可見部分添加到同一部分時才觸發此事件，請像這樣重新編寫CSS：

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

或者，如果不需要，請確保沒有父元素應用可見類。