así que estoy trabajando en eventos de mouseover y clic en javascript. He usado efectos de desplazamiento de css con gran éxito, sin embargo, estoy tratando de incorporar javascript.
Quiero que mi elemento div pase de ninguno a bloque. No tengo problemas allí y funciona muy bien.
Mi principal preocupación es ¿puedo facilitar la transición como css puede facilitar las transiciones, o tengo que abordar el efecto de una manera diferente?
No veo la necesidad de hacerlo con JS si CSS se ajusta a las necesidades. Sin embargo, a veces utilicé Transition.js para facilitar esta tarea.
Probablemente no era la respuesta que estabas buscando, pero seguro que te será útil.
No puede hacer una transición de none a block, porque cuando un elemento recibe la display: none , no aparecerá en la página en absoluto. Si lo sustituye con opacity: 0 , entonces será posible.
#myDiv { opacity: 0; transition: 1s; } #myDiv:hover { opacity: 1; transition: 1s; } const div = document.querySelector("#myDiv"); div.style.opacity = 0; div.style.transition = "1s"; div.addEventListener("mouseover", () => { div.style.opacity = 1; }); div.addEventListener("mouseleave", () => { div.style.opacity = 0; });