reveal.js - 替换reveal.js中的图像

Question

假设我要连续显示两个非常相似的图像（例如，第一个是照片，第二个是同一照片，但突出显示了某个区域）。我想避免过渡动画，只用第二张图片替换第一张图片即可。 reveal.js可以吗？

设置data-transition="none"效果不佳，因为上一张幻灯片仍保留其动画。

Answer 1

Reveal.js本身没有任何直接方法可用于执行所要求的操作。但是，可以使用div容器和Reveal.js的fragment功能来完成。容器中包含图像，这些图像绝对位于其中，因此，它必须具有固定的尺寸。

下面的html显示第一个图像，在下一个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>