Reveal.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 使用延迟加载幻灯片，预加载当前幻灯片某个 'distance' 范围内的幻灯片，并卸载更远的幻灯片。这主要用于加载和卸载使用 data-src 属性的媒体，但它也通过将幻灯片样式设置为 display: none 来隐藏幻灯片。在您的情况下，当跳转到超过 3 张幻灯片的幻灯片时，不会发生幻灯片转换，因为在转换之前不会显示幻灯片。设置较大的 viewDistance 将避免这种情况，但请注意，这将绕过您配置的任何延迟加载媒体。

至于Reveal.slide( indexh, indexv, indexf )函数：

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

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

Reveal.js 自定义键盘绑定取消淡入淡出过渡

Reveal.js Custom Keyboard Bindings negate Fade Transition

javascript

css

jquery

slideshow

reveal.js