javascript - 当父部分在滚动条上可见时动画 div

Question

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

我正在使用滚动劫持，每次滚动时都会将用户带到新的部分/卡片。

每次用户滚动到新的部分/卡片时，它都会添加一个visible类。

我用这个作为基础 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

看起来您已将“可见”类应用于目标部分的父元素。

你的CSS:

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

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

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

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