Question

我已经进行了这项工作，但似乎一路搞砸了。

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

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

<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 类，因此应播放动画。

尽管您在我离开本节时看到的是.strong上的.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);
}

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