在他们出现后隐藏reveal.js片段

Question

说我有一个简单的reveal.js幻灯片,如下所示:

<section>
  <h2 class="fragment" data-fragment-index="1">first</h2>
  <h2 class="fragment" data-fragment-index="2">second</h2>
  <h2 class="fragment" data-fragment-index="1">first</h2>
</section>

我希望两个"第一个" 仅在片段1中显示,然后在"第二个"出现时返回隐藏在片段2中.我该怎么办？

Answer 1

该current-visible班是你在找什么,看到片段DOC:https://github.com/hakimel/reveal.js/#fragments

有关此类的演示,请参阅一般的reveal.js演示:http://lab.hakim.se/reveal-js/#/20/1

Answer 2

如果要在隐藏元素显示后完全删除隐藏元素所占用的空间,可以使用以下CSS选择器和属性:

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}

此外,如果你不希望这种行为对其他当前可见的碎片,你可以添加自定义类的选择和HTML元素.