如何在javascript中点击时添加淡入淡出效果？

Question

如何在图片发生变化时添加淡入或淡出效果，当您点击下一张图片时？我在这里使用画布。我没有使用自动幻灯片，也没有使用超时。基本上，它在图像转换过程中增加了效果。

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()"> 

Answer 1

你可以试试这个：

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

有什么是听取transitionend事件并在事件结束时删除该类。画布将转换回opacity: 1。它也会在超时时间内完成，因此可以保持浏览器仍然不支持transitionend事件。顺便说一句，他们是旧的浏览器几乎没有使用时下（IE9等）：http://caniuse.com/#search=transitionend你可以删除它，如果你想。

Protip：保持您的缩进清洁。

Protip 2：要向元素添加文本，请使用textContent而不是innerHTML。速度更快，并且允许特殊字符而无需任何预转换，如普通的<和>。