0

尽管我设法使基本功能正常工作，但我的 JS/JQ 知识非常有限，我根据一些教程编写了这个并且它可以工作

var section = $('section')
section.waypoint(function() {
  $('section').toggleClass('pre-ani') 
}, {offset: '50%'})

html

<section class="pre-ani">
  <div>Some Content</div>
</section>

现在它所做的基本上是当它从底部进入 VP 时从该部分中删除“.pre-ani”，并在它从底部离开 VP 时将其添加回来

我正在寻找但找不到方法是

  • 当从底部进入 = 删除 .pre-ani
  • 从顶部出来时 = 添加 .post-ani
  • 当从顶部进入 = 删除 .post-ani
  • 当从底部出来时 = 添加 pre-ani

我想在动画之前和动画之后切换一个类

除此之外，我希望它在每次进入或离开 VP 时影响页面上的所有部分，而无需为特定的部分 ID 编写代码

<section class="post-ani"><div>Some Content</div></section>
<section class="post-ani"><div>Some Content</div></section>
<section class="post-ani"><div>Some Content</div></section>
<section class="post-ani"><div>Some Content</div></section>
<!-- -------------- inside the VP ----------------- -->
<section class=""><div>Some Content</div></section>
<!-- -------------- inside the VP ----------------- -->
<section class="pre-ani"><div>Some Content</div></section>
<section class="pre-ani"><div>Some Content</div></section>
<section class="pre-ani"><div>Some Content</div></section>

这有什么意义吗？如果不够清楚，我很乐意解释更多

4

0 回答 0