How to add transition from one function to another in JavaScript?

Issue

I want to add some smooth transition or animation from the mouse enter event to the mouse leave.

JS :

/* mudar cor do logo maior */
var myImage = document.querySelector('img#logo-maior');

myImage.onmouseenter = function() {
    var mySrc = myImage.getAttribute('src');
    myImage.setAttribute ('src','images/type-logo-coral.png');   
}

myImage.onmouseleave = function() {
    var mySrc = myImage.getAttribute('src');
    myImage.setAttribute ('src','images/type-logo.png');
}

HTML :

<div class="display">
    <img id="modelos" src="images/modelos/1.png">
    <img id="logo-maior" src="images/type-logo.png" alt="TYPE logo">
<!-- 
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
-->
</div>

Solution

Use CSS Animation. Add class for each function that will trigger the animation

Try this code

css

.transition1{
  animation: fadeIn1 1.5s; 
  -webkit-animation: fadeIn1 1.5s;  ;
  opacity: 1;
}

@keyframes fadeIn1{
 from{
 opacity: 0;
}
 to{
  opacity: 1;
 }
}

@-webkit-keyframeskeyframes fadeIn1{
 from{
   opacity: 0;
 }
 to{
   opacity: 1;
 }
}

 .transition2{
   animation: fadeIn2 1.5s; 
  -webkit-animation: fadeIn2 1.5s; ;
   opacity: 1;
 }

 @-webkit-keyframeskeyframes fadeIn2{
   from{
     opacity: 0;
    }
  to{
    opacity: 1;
  }
 }

javascript

var myImage = document.querySelector("img#logo-maior");

myImage.onmouseenter = function() {
    myImage.classList.remove("transition2");
    myImage.setAttribute("class", "transition1");

  myImage.setAttribute("src", "../image2.jpg");
};

myImage.onmouseleave = function() {
    myImage.classList.remove("transition1");
    myImage.setAttribute("class", "transition2");

  myImage.setAttribute("src","../image1.jpg"
 );
};

html

 <div class="display">
     <img
        id="logo-maior"
        src="../img1.jpg"
        alt="TYPE logo"
      />
  </div>

Answered By - louie kim