当父部分在滚动时可见时为 div 设置动画答案

【问题标题】：Animate div when parent section is visible on scroll当父部分在滚动时可见时为 div 设置动画
【发布时间】：2018-09-09 21:24:39
【问题描述】：

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

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

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

<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 保持不变。

【问题讨论】：

最后一行 css 的写法，如果 .home__content-slide-right 的任何父元素应用了 .visible 类，就会出现这个动画。这可能是问题所在。
嗨 Dylan，感谢您的回复，但我才开始添加一些基本的动画，并且每个部分都使用了一次。我添加了图片以帮助人们理解我遇到的问题。我觉得你在正确的轨道上虽然我看不到它:(
那么css类被移除了，样式仍然适用？发生这种情况的唯一原因是，如果您有应用了“可见”类的部分的父元素。您能否确认该部分的正文和所有父级没有应用可见类？
你在我的朋友身上。我以某种方式将 .visible 类应用于身体：/。非常感谢您的帮助，我需要一段时间才能发现这个，希望您有一个美好的一周:)
非常欢迎。我刚刚发布了一个包含更多上下文的答案。

【解决方案1】：

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

你的 CSS：

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

是这样编写的，以便该元素的任何具有 .visible 类的父级都将应用此 css 规则。如果要确保仅在将可见添加到同一部分时才触发，请像这样重写 css：

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

如果没有必要，请确保没有父元素应用可见类。

【讨论】：