当父部分在滚动中可见时动画 div

Question

我有这个工作，但似乎一直搞砸了。

我正在使用滚动劫持，每次滚动时都会将用户带到一个新的section/card。

每次用户滚动到新的 section/card。

时，它会添加一个 visible class

<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>

我使用的是class这个名字； home__content-slide-right 在这里暂时使用变换为该文本设置动画，您可以在下面看到；

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

我是怎么做的，只是将 .visible 附加到 CSS 上，您可以在下面看到；

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

这是有效的，所以当我滚动到每个页面时动画播放，但现在它似乎只在加载整个页面时播放一次，仅此而已。

我试图删除一些东西，但到目前为止还没有成功，只是想知道是否有其他人有它不工作的原因。

------编辑------

我在下面添加了一些图片，以便您了解我的问题所在。

第一张图片包含 .visible class 的部分，因此应该播放动画。

尽管如您所见，当我离开该部分并且 .visible class 被删除时，css 保持不变。

Answer 1

您似乎将 "visible" class 应用于目标部分的父元素。

你的css：

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

是这样写的，因此具有 .visible class 的该元素的任何父元素都将应用此 css 规则。如果你想确保只有在将 visible 添加到同一部分时才会触发，请像这样重写 css：

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

或者如果不需要，请确保没有父元素应用可见 class。

Animate div when parent section is visible on scroll