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中的两个“first”显示为 only ，然后当出现“second”时，返回隐藏在片段2中。我该怎么办？

Answer 1

您正在寻找current-visible课程，请参阅有关片段的文档：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元素添加自定义类。

Answer 3

一个人也可以使用this solution：

.reveal .slides section .fragment {
    opacity: 0;
    display: none; }
.reveal .slides section .fragment.current-fragment {
    opacity: 1;
    display: inline; }

Answer 4

只是为了扩展渡渡鸟的答案。如果你想完全删除元素，但也想要一点动画，你可以做类似的事情：

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        line-height: 0px;
        font-size: 0px;
        height: 0px;
        display: none;
    }
}

以上将淡出元素。你也可以做一些很酷的事情：

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1.5s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
    transform-origin: 0% 100%;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateY(900px) rotateZ(70deg);
        line-height: 0px;
        display: none;
    }
}

这会使项目“滑落”幻灯片。

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

4 个答案: