javascript - Reveal.js：如何在没有淡出效果的两个垂直部分之间创建自定义过渡（未预定义）？

Question

我正在寻找一种在两个垂直部分之间进行转换的方法，这些垂直部分看起来像 fullpage.js 中提供的部分： https ://codepen.io/ehouarn-perret/pen/jprrqx?editors=0010

目前，我有一些几乎相似的东西，除了幻灯片过渡会导致上一部分的直接淡出：
https ://codepen.io/ehouarn-perret/pen/ajVBzY?editors=0110

我的 JavaScript 代码：

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getSectionColors(length) {
  var results = [];
  for (var i = 0; i < length; i++) {
    var randomColor = getRandomColor();
    results.push(randomColor);
  }
  return results;
}

var sectionCount = 6;
var sectionColors = getSectionColors(sectionCount);

for (var i = 0; i < sectionCount; i++) {
  var section = 
      "<section style='background-color: " + sectionColors[i] + ";'>" +
      "<div class='section-content'>" +
      "<h1>" + i + "</h1>" +
      "</div>" +
      "</section>";
  $('#sections').append(section);
}

Reveal.initialize({
  width: '100%',
  height: '100%',
  progress: false,
  transition: 'slide',
  backgroundTransition: 'slide',
  mouseWheel: true,
});

console.log(Reveal.getScale());

和相关的HTML：

<div class="reveal">
    <div class="slides">
        <section id="sections">
        </section>
    </div>
</div>

我怎样才能实现类似的东西，从一个过渡到另一个时将两个部分粘在一起的过渡？

标签： javascripthtmlcssfullpage.jsreveal.js