Skip to main content

Optiomización Optimización de código javascript para animación de css

Origen Enlace
JorgeGuz
  • 2.4k
  • 2
  • 14
  • 27

Optiomización de código javascript para animación de css

Necesito optimizar mi código javascript para una animación. Ahora se realiza la acción desatando dos funciones con "onmouseenter" y onmouseleave" y me gustaría optiomizar a una sola. Actualmente el código es:

html

 <div>
 <img onmouseenter=" myf1()"; onmouseleave="myf2()" id="img" class="img 
 img3" src="http://www.placehold.it/150x150">
 </div>

css

.img {
  transform: rotate(0); border-radius: 50%;
}
.img2 {margin-left:3.5em; transition: all 1s; transform:rotate(-45deg)}
.img3 {margin-left:0; transition: all 1s; transform:rotate(0)}

js

function myf1() {
  var element = document.getElementById("img");
  element.classList.remove("img3");
  element.classList.add("img2");
}
function myf2() {
  var element = document.getElementById("img");
  element.classList.remove("img2");
  element.classList.add("img3");
}