当图像在单击时发生更改时，如何在javascript中添加淡入效果？

当您单击下一张图像时，如何在图像更改时添加淡入或淡出效果？我用的是帆布。我没有使用自动幻灯片，也没有使用超时。基本上，它会在图像过渡期间添加效果

function nextimg() {

i++;
if(i > 0 && i < 6) {
    image.src = 'images/' + i + '.jpg';
}

if(msg1 == i) {
    msg = "Fallout 4";
    document.getElementById("caption").innerHTML = msg;
}
else if(msg2 == i) {
    msg = "Diamond City";
    document.getElementById("caption").innerHTML = msg;
}
else if(msg3 == i) {
    msg = "Commonwealth";
    document.getElementById("caption").innerHTML = msg;
}
else if(msg4 == i) {
    msg = "Glowing Sea";
    document.getElementById("caption").innerHTML = msg;
}
else if(msg5 == i) {
    msg = "Cambridge";
    document.getElementById("caption").innerHTML = msg;
}

var canvas = document.getElementById("img_1").className += "fadeOutEffect";

var canvas = document.getElementById("img_1");
var context = canvas.getContext("2d");
    context.drawImage(image, 0,0, 500, 400);
}

=================================

#prevpic {
    opacity:1;
    transition: opacity 1s; 
}

#nextpic.fadeOutEffect {
    opacity:0;
}

<h2 id="caption"></h2>
        <canvas id="img_1" width="500" height="400">
            <--!input type="submit" onclick="canvas(); return false;"!-->
        </canvas><br><br>
        <input type="submit" id="prevpic" value="Previous" onclick="previmg()">
        <input type="submit" id="nextpic" value="Next" onclick="nextimg()">

您可以尝试以下方法：

function nextimg() {
    i++;
    if(i > 0 && i < 6) {
        image.src = 'images/' + i + '.jpg';
    }

    if(msg1 == i) {
        msg = "Fallout 4";
        document.getElementById("caption").innerHTML = msg;
    }
    else if(msg2 == i) {
        msg = "Diamond City";
        document.getElementById("caption").innerHTML = msg;
    }
    else if(msg3 == i) {
        msg = "Commonwealth";
        document.getElementById("caption").innerHTML = msg;
    }
    else if(msg4 == i) {
        msg = "Glowing Sea";
        document.getElementById("caption").innerHTML = msg;
    }
    else if(msg5 == i) {
        msg = "Cambridge";
        document.getElementById("caption").innerHTML = msg;
    }

    var canvas = document.getElementById("img_1");
    canvas.className += " fadeOutEffect"; // Add an space so do not concats existent classes
    canvas.addEventListener("transitionend", function transitionend() {
        canvas.removeEventListener("transitionend", transitionend, false);
        clearTimeout(tim);
        canvas.className = canvas.className.replace(" fadeOutEffect", "");
    }, false);
    var tim = setTimeout(transitionend, 1100); // To overcome old browsers
    var context = canvas.getContext("2d");
    context.drawImage(image, 0,0, 500, 400);
}

函数nextimg（）{
i++；
如果（i>0&&i<6）{
image.src='images/'+i+'.jpg'；
}
如果（msg1==i）{
msg=“放射性尘埃4”；
document.getElementById（“标题”）.innerHTML=msg；
}
else if（msg2==i）{
msg=“钻石城”；
document.getElementById（“标题”）.innerHTML=msg；
}
else if（msg3==i）{
msg=“联邦”；
document.getElementById（“标题”）.innerHTML=msg；
}
else if（msg4==i）{
msg=“发光的海洋”；
document.getElementById（“标题”）.innerHTML=msg；
}
else if（msg5==i）{
msg=“剑桥”；
document.getElementById（“标题”）.innerHTML=msg；
}
var canvas=document.getElementById（“img_1”）；
canvas.className+=“fadeoutfect”；//添加一个空格，以便不包含现有类
addEventListener（“transitionend”，函数transitionend（）{
canvas.removeEventListener（“transitionend”，transitionend，false）；
清除超时（tim）；
canvas.className=canvas.className.replace（“淡出效果”）；
}，假）；
var tim=setTimeout（transitionend，1100）；//克服旧浏览器
var context=canvas.getContext（“2d”）；
drawImage（图像，0,0500400）；
}

它所做的是侦听

transitionend

事件，并在事件结束时删除该类。画布将转换回

不透明度：1

。它还具有超时功能，因此可以容纳仍不支持

transitionend

事件的浏览器。顺便说一句，它们是现在几乎没有使用过的旧浏览器（IE9之类的）：如果你愿意，你可以删除它

保持压痕清洁

Protip 2：要向元素添加文本，请使用

textContent

而不是

innerHTML

。速度更快，允许使用特殊字符而无需任何预转换，如普通