HTML5演示文稿–在幻灯片之间添加淡入淡出过渡

Question

我有一个学校作业，要用HTML5创建演示文稿，并且找到了一个模板，可以帮助完成该作业。 它不完整，下面是工作模板，我想在此演示文稿的幻灯片之间添加淡入淡出过渡，并且我不知道要添加淡入淡入过渡的JavaScript。 这是工作演示的链接，我希望得到一些帮助。

http://perlaparra.com/uopx/sandbox/987153624/#intro

Answer 1

您可以发布自己的代码吗？ 您可以尝试使用JQuery效果，如下所示：

<div id="clickme">
Click here
</div>
    <img id="book" src="book.png" alt="" width="100" height="123">

    // With the element initially hidden, we can show it slowly:
    $( "#clickme" ).click(function() {
    $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
    });
});

Answer 2

根据您的链接，您不必使用JS淡入淡出库您可以使用CSS3来处理它，只需将这两行添加到CSS中

.slide {
    opacity: 0;
    transition: all 0.5s ease;
}