在出现后隐藏reveal.js片段答案

【问题标题】：Hide reveal.js fragments after their appearance在出现后隐藏reveal.js片段
【发布时间】：2014-11-08 17:37:45
【问题描述】：

假设我有一个像这样的简单的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 中。我该怎么做？

【问题讨论】：

标签： reveal.js

【解决方案1】：

如果您想在隐藏元素显示后完全移除它所占用的空间，可以使用以下 CSS 选择器和属性：

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

此外，如果您不希望其他当前可见的片段出现这种行为，您只需将自定义类添加到您的选择器和 HTML 元素。

【讨论】：

它可以工作，但是这个动画远非完美。
对我有用的是：.fragment.visible:not(.current-fragment) 没有 .current-visible。
您可以添加 css 动画，我已经添加了答案来证明这一点。

【解决方案2】：

current-visible 类是您正在寻找的，请参阅片段文档：https://github.com/hakimel/reveal.js/#fragments

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

【讨论】：

请记住，这只会改变片段的可见性，因此它仍然会占用空间。如果要替换片段，请添加一些不改变可见性但改变高度（从 0 到 auto）的 css。

【解决方案3】：

也可以使用this solution：

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

【讨论】：

【解决方案4】：

只是为了扩展 dodo 的答案。如果你想完全删除元素，但还想要一点动画，你可以这样做：

.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;
    }
}

这将使项目从幻灯片中“掉出”。

【讨论】：