Question

假设我想要连续显示两个非常相似的图像（首先是一张照片，第二张是同一张照片，其中一些区域突出显示）。我想避免过渡动画，只是让第二张图像替换第一张图像。这可能是reveal.js吗？

设置data-transition="none"并不能很好地工作，因为上一张幻灯片仍保留其动画。

Answer 1

Reveal.js本身没有任何直接的方法来处理所要求的内容。但是，可以使用div容器和reveal.js的fragment功能来完成。容器包括绝对定位在其中的图像，并且因此必须具有固定尺寸。

以下html显示第一张图片，下一张幻灯片显示第一张图片。

<section>
<h1>Slide 1</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

当这段html显示第一张图片时，在下一张幻灯片上，第一张图片淡出，第二张图片淡入。

<section>
<h1>Slide 2</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment fade-out" data-fragment-index="0" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment fade-in" data-fragment-index="0" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

Answer 2

另一种可能的解决方案是使用Javascript。

假设您有一个标题，并且您有三张图像应该在同一部分内相互显示。我们可以扩展片段的功能。

html看起来像：

<section>
    <h3>Your title</h3>
    <img src="" />
    <div>
        <span class="fragment imgsrc" data-src="img/pic1.svg" data-fragment-index="0"></span>
        <span class="fragment imgsrc" data-src="img/pic2.svg" data-fragment-index="1"></span>
        <span class="fragment imgsrc" data-src="img/pic3.svg" data-fragment-index="2"></span>
    </div>
</section>

现在我们添加一个函数fadeImage()，并在每次触发fragmentshown或fragmenthidden时调用它。

function fadeImage($el) {
    // Get image DOM element
    $img = $el.parent().siblings('img');

    // Fade the image out, change source and fade in again
    $img.fadeOut(100, function() {
        $img.attr('src', $el.data('src'));
        $img.fadeIn(500);
    });
}

Reveal.addEventListener('fragmentshown', function(event) {
    // Get DOM element of current fragment
    var $el = $(event.fragment);

    // Check if current fragment is of 'type' imgsrc
    // If yes: fade image with source of current element
    if($el.hasClass('imgsrc'))
        fadeImage($el);
});

Reveal.addEventListener('fragmenthidden', function(event) {
    // Get DOM element of current fragment
    var $el = $(event.fragment);

    // Check if current fragment is of 'type' imgsrc
    // If yes: fade image with source of previous element
    if($el.hasClass('imgsrc')) {
        fadeImage($el.prev());
    }
});

由于我们刚刚扩展了片段功能，我们仍然可以使用data-fragment-index属性。例如，您可以显示每个图像的描述。

该解决方案可以轻松优化/定制。

Answer 3

您可以指定两个转换，用于进入和离开，因此以下工作但有毛刺（出现时图像闪烁）：

<section data-transition="slide none">
  <img src="timeline2.a.svg">
</section>
<section data-transition="none">
  <img src="timeline2.b.svg">
</section>
<section data-transition="none side">
  <img src="timeline2.c.svg">
</section>

否则这也可能是一个解决方案，这与你想要的有点不同但是也不错：

<section data-transition="slide fade-out">
  <img src="timeline2.a.svg">
</section>
<section data-transition="fade-in fade-out">
  <img src="timeline2.b.svg">
</section>
<section data-transition="fade-in side">
  <img src="timeline2.c.svg">
</section>

Answer 4

reveal.js 4.0引入了一个新的r-stack类，可以更轻松地将元素堆叠在一起。

<div class="r-stack">
  <img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>

以上示例使彼此重叠的图像渐隐。如果您想一次只显示一张图像，则需要使用稍微不同的片段设置。

<div class="r-stack">
  <img class="fragment current-visible" src="...">
  <img class="fragment current-visible" src="...">
  <img class="fragment" src="...">
</div>

您可以在Reveal.js文档https://revealjs.com/layout/#stack

中看到有关此工作原理的示例。

Answer 5

假设您使用data-background来显示照片，那么您需要使用data-background-transition="none"来获得所需的效果。

替换reveal.js中的图像

5 个答案: