如何在fullpage页面切换前依次执行对应Section的动画？

期望实现流程 #

• section1：触发滚动 → 执行动画 → 动画结束 → 切换至section2
• section2：触发滚动 → 执行动画 → 动画结束 → 切换至section3
• section3：触发滚动 → 执行动画 → 动画结束 → 切换至section4
• section4：触发滚动 → 执行动画 → 动画结束 → 若向上滚动则切换至section3

当前问题 #

所有section的动画会同时触发

代码实现 #

JavaScript #

var delay = 1000;
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  onLeave: function(origin, destination, direction) {

    $('.block').addClass('animate');
    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      animationIsFinished = true;

      fullpage_api.moveTo(destination.index + 1);
    }, delay);

    return animationIsFinished;

  },
});

CSS #

.section {
    text-align: center;
    font-size: 3em;
    font-family: arial;
}

.block,
#element{
    transition: all 2s ease;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.block.animate {
  transform: translateX(100px);
}

#element.animate{
    margin-left: 250px;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/fullpage.js@4.0.19/dist/fullpage.min.js"></script>
<link href="https://unpkg.com/fullpage.js@4.0.19/dist/fullpage.min.css" rel="stylesheet"/>
<div id="fullpage">
  <div class="section">
    <div class="block"></div>
    Section 1
  </div>
  <div class="section">
    <div class="block"></div>
    Section 2
  </div>
  <div class="section">
    <div class="block"></div>
    <div id="element">
      Section 3
    </div>
  </div>
  <div class="section">
    <div class="block"></div>
    Section 4
  </div>
</div>

恳请各位提供帮助，提前致谢！

内容的提问来源于stack exchange，提问作者Ivan Simonov