时间戳

首页 > 解决方案 > 当父部分在滚动时可见时为 div 设置动画

javascript - 当父部分在滚动时可见时为 div 设置动画

问题描述

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

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

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

我以此为基础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 保持不变。

在此处输入图像描述

标签： javascriptjqueryhtmlcssscrollview

解决方案

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

你的CSS：

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

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

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

或者确保没有父元素应用了可见类，如果它是不必要的。

推荐阅读