onclick缓慢隐藏以前的图像并显示新图像

Question

是否可以使用此代码并先隐藏旧图像并显示新的like here。我想创建一个变量，在其中可以收集以前的图像名称并可能将timePassed更改为-timePassed，但无法实现正确的效果影响。如果可以的话，请建议纯js。

    function animate(draw,duration){
  var start = performance.now();
  requestAnimationFrame(function animate(time){
    var timePassed = time- start;
    if(timePassed > duration) timePassed = duration;
    draw(timePassed), 1000;

    if(timePassed < duration){
      requestAnimationFrame(animate);
    }
  });
}

for(var i=0; i<table.length; i++){

  table[i].addEventListener("click", function(event){


      clearAll();
      var tar = event.target;
      targetName=tar.classList;
      var name = tar.className;

      targetName.add("active");

    animate(function(timePassed){
      if(tar.className == name +" active"){

        head.style.display = "block";
        document.querySelector(".maintext").innerHTML=name;
// images appear on the page trough their names
        mainIMG.src = name+"1.jpg";
        odd1IMG.src = name+"2.jpg";
        odd2IMG.src = name+"3.jpg";
      }

      mainIMG.style.top = timePassed / 3 + "px";
      odd1IMG.style.top = timePassed / 3 + "px";
      odd2IMG.style.top = timePassed / 3+ "px";


  }, 900);



});


}



function clearAll(){
  for(var i=0; i<table.length; i++){
    table[i].classList.remove("active");
  }
}