so I am working on mouseover and click events in javascript. I have used css hover affects with great success, however I am trying to incorporate javascript.
I want my div element to transition from none to block. I have no issues there and it works great.
My primary concern is can I ease in the transition like css can ease the transitions, or do I have to go about the affect a different way?
I don't see the need of doing it with JS if CSS fits the needs. However, sometimes I used transition.js to make this task easier.
Probably wasn't the answer you were looking for, but sure it'll be helpful.
You cannot make a transition from none to block, because when a element receives the display: none, it will not appear on the page at all. If you substitute it with opacity: 0, then it will be possible.
#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;
});