31

reveal.js 支持将在 HTML 中一个接一个显示的片段：

<section>
    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment roll-in">roll-in</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>
</section>

它支持使用 Markdown 而不是 HTML 为每张幻灯片使用：

<section data-markdown>
    ## Page title

    A paragraph with some text and a [link](http://hakim.se).
</section>

但我找不到任何关于在 Markdown 中使用片段的文档。我错过了什么还是它还不支持？

4

5 回答 5

31

它现在支持属性，通过添加 tag: <!-- .element: class="fragment" -->。

支持的属性更多，如background,index等。更多示例见官方文档：Element Attributes , Slide Attributes。

于 2014-02-11T03:05:24.980 回答
11

如果您希望在 jez 在他的评论中指出的 Markdown 格式部分中创建片段，这就是您所需要的

* Item 1 <!-- .element: class="fragment" -->
* Item 2 <!-- .element: class="fragment" -->

原始来源 - https://stevegrunwell.com/blog/building-presentations-reveal-js/（死链接）

还有另一个教程 - http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

于 2016-09-21T13:59:33.223 回答
5

对于那些使用pandocMarkdown 制作幻灯片的人，请务必阅读有关幻灯片放映的手册部分，特别是关于增量列表 的小节。也就是说，后者说你可以：

  • 使用选项-i设置所有列表的增量行为。
  • 使用受保护的div语法在单个列表上 强制 incremental或行为：nonincremental
    ::: incremental

- Eat spaghetti
- Drink wine

:::
  • 将列表放在块引用中以反转预设行为。 
    > - Eat spaghetti
> - Drink wine

这不会为您提供Clay 的答案中建议的细粒度控制 ，但它很简单、有文档且与多种输出格式兼容。

于 2021-08-03T18:17:35.027 回答
5

我正在使用 pandoc 将 markdown 文件转换为reveal.js 演示文稿。

不知道为什么，但上述答案都不适合我。但是，将文本包含在标记的围栏块中。

使用reveal.js片段示例https://revealjs.com/fragments/

:::{.element: class="fragment"}
Fade in
:::

:::{.element: class="fragment fade-out"}
Fade out
:::

:::{.element: class="fragment highlight-red"}
Highlight red
:::

:::{.element: class="fragment fade-in-then-out"}
Fade in, then out
:::

:::{.element: class="fragment fade-up"}
Slide up while fading in
:::
于 2021-02-02T16:53:42.617 回答
4

请参考本期Markdown inside Fragments，我认为 Fragments 只适用于 HTML 级别。

我想你可以直接在 Markdown 转换后操作 DOM，就像这样：

{ src: 'plugin/markdown/markdown.js',
  condition: function() { return !!document.querySelector( '[data-markdown]' ); },
  callback: function() {
    Array.prototype.forEach.call(document.querySelectorAll('section > p'), function(ele){ ele.className = 'fragment'; });
  }
},
于 2013-03-12T05:52:46.150 回答