揭示.js自定义键盘绑定否定淡入淡出过渡

Question

我有大约 20 张幻灯片，我已经分配了键盘重新分配以转到每张幻灯片，具体取决于您按下的键。我记下了已经分配的键盘命令，以免覆盖任何重要内容(全屏、下一个、上一个等)

我遇到的问题是，我可以从幻灯片 1 过渡到幻灯片 2，幻灯片 1 过渡到幻灯片 3，幻灯片1 过渡到幻灯片 4，依此类推，但是在幻灯片 6 或 7 左右，淡入淡出只是拒绝工作，它只是快速剪切到下一张幻灯片。我想知道我在初始化脚本中是否写错了东西。

Reveal.initialize({
controls: false,
progress: false,
history: false,
center: true,
transition: 'fade',
transitionSpeed: 'slow',
loop: true,
keyboard: {
81: function() { Reveal.slide(0) }, // Q Key
87: function() { Reveal.slide(1) }, // W Key
69: function() { Reveal.slide(2) }, // E Key
82: function() { Reveal.slide(3) }, // R Key
84: function() { Reveal.slide(4) }, // T Key
89: function() { Reveal.slide(5) }, // Y Key
85: function() { Reveal.slide(6) }, // U Key
73: function() { Reveal.slide(7) }, // I Key
219: function() { Reveal.slide(8) }, // [ Key
221: function() { Reveal.slide(9) }, // ] Key
220: function() { Reveal.slide(10) }, //  Key
65: function() { Reveal.slide(11) }, // A Key
68: function() { Reveal.slide(12) }, // D Key
71: function() { Reveal.slide(13) }, // G Key
186: function() { Reveal.slide(14) }, // ; Key
222: function() { Reveal.slide(15) }, // ' Key
90: function() { Reveal.slide(16) }, // Z Key
88: function() { Reveal.slide(17) }, // X Key
67: function() { Reveal.slide(18) }, // C Key
77: function() { Reveal.slide(19); } // M Key
},
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});

关于如何正确使用 .slide() 的文档充其量是平庸的。 文档明确指出调用是：

Reveal.slide( indexh, indexv, indexf );

但它从未真正说明indexh，indexv或indexf是什么。

Answer 1

您需要将初始化选项中的viewDistance参数更改为大于幻灯片的数量，例如...

Reveal.initialize({
//...
viewDistance: 20
});

默认情况下，reveal 使用延迟加载幻灯片来预加载当前幻灯片特定"距离"内的幻灯片，并卸载距离较远的幻灯片。这主要用于加载和卸载使用data-src属性的媒体，但它也通过将幻灯片样式设置为display: none来隐藏幻灯片。在您的情况下，当跳转到向前超过 3 张幻灯片的幻灯片时，不会发生幻灯片切换，因为在切换之前未显示幻灯片。设置较大的viewDistance可以避免这种情况，但请注意，这将绕过您配置的任何延迟加载媒体。

至于Reveal.slide( indexh, indexv, indexf )功能：

• indexh是幻灯片的水平索引
• indexv是幻灯片的垂直索引
• indexf是目标幻灯片中片段的索引

当您调用Reveal.slide(1)时，您实际上并没有更改为幻灯片 1，而是更改为第二张水平幻灯片(0 索引)。我假设您没有任何垂直幻灯片，因此索引将直接匹配数字。