Javascript 动画始终处于激活状态，因为在“反应”中滚动时状态始终更改

因此，我使用React/为

Showcase

组件设置动画，如下图所示：

我差不多到了，但我想不出最后一点。基本上，我有一系列的项目：

const chapters = [
  {
    content: "1",
    title: "Create your profile"
  },
  {
    content: "2",
    title: "See their rating"
  },
  {
    content: "3",
    title: "Forgot annoying requests"
  },
  {
    content: "4",
    title: "Block them"
  },
  {
    // tslint:disable-next-line:max-line-length
    content: "5",
    title: "Make your decision"
  },
  {
    content: "6",
    title: "Time elapses"
  },
  {
    content: "7",
    title: "Complete"
  }
];

还有一个

handleScroll（e）

方法，它可以做一些事情：

在滚动组件时检测

滚动浏览章节时，它会使用章节中正确的章节内容更新

this.state.content

和

this.state.title

：

--

//循环浏览各章
for（让index=0；index=component.offsetTop&&
scrollY=topOfChapter[索引]&&
scrollY也许你可以用这个

因此，您不需要自定义实现？
您应该缓存章节的位置，方法是仅当页面从数据库加载章节数据时，以及每当用户调整屏幕大小时（因为发生这种情况时，组件的高度会发生变化），将其保存为组件状态的数组

然后在scroll上，将scrollY与章节位置数组进行比较，以确定您所处的位置：

this.state.chapters.forEach（（章，索引）=>{
如果（scrollY>=chapter.top&&scrollY应该是您要寻找的效果

我改变了很多事情，使其进入可用状态，并做出了一些假设


退出动画完成后，您希望启动下一章的
enter
动画。您遇到的问题是，您已经失去了上一章的轨迹，因为您已经将
状态更新到下一章，同时也反复触发动画

我现在通过跟踪、当前章节（当前可见的章节）和下一章（您希望过渡到的章节）解决了这个问题


这将启动当前章节上的退出动画。动画完成后，将调用
onPoseComplete
，如果动画为false，即退出动画现在已完成，则将状态更新为：

{
   animate: true,
   currentChapter: 1,
   nextChapter: 1,
}

它现在将启动currentChapter上的
进入
动画，该动画现在更改为1


现在我们正在跟踪章节索引，不需要我删除的
标题
，
内容
状态

我已经将handleScroll逻辑简化为我认为等效的逻辑。通过使用
窗口分割滚动条。innerHeight
，我们可以得到您想要可见的章节索引


我们知道有多少章节，所以只需将章节数乘以100vh即可

onPoseComplete = () => {

当您使用
create react app
时，您有
transform class属性
，它允许您创建箭头函数而不是
。bind
我需要使用Pose unfortunity，因为您可以检查标题，因此如果状态中的标题与章节[index]中的标题不同，则只需更新状态`this.setState（（prevState）=>{if（prevState.title！==chapters[index].title）{return{animate:！this.state.animate，content:chapters[index].content，title:chapters[index].title}}}}）；`or如果（scrollY>=topOfChapter[index]&&scrollY Thank@Oleksandr我现在不在家，一个小时后我要试试你说的话。我很感激！我已经用你的建议做了一个代码沙箱，但它有问题（我现在太累了，无法进一步调查，所以我明天再查。无论如何，谢谢，如果你有兴趣，这里是Codesandbox：你能分享整个组件吗？嘿@Alvaro整个组件都链接在沙盒中。或者我误解了你的问题吗？我看到了，没有注意到沙盒。谢谢。不用担心，谢谢你看！
{
   animate: false,
   currentChapter: 0,
   nextChapter: 1,
}

{
   animate: true,
   currentChapter: 1,
   nextChapter: 1,
}

  style={{ height: `${100 * chapters.length}vh` }}

onPoseComplete = () => {