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?

CodePudding user response：

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.

http://www.transitionjs.org/

Probably wasn't the answer you were looking for, but sure it'll be helpful.

CodePudding user response：

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.

Pure CSS

#myDiv {
opacity: 0;
transition: 1s;
}

#myDiv:hover {
opacity: 1;
transition: 1s;
}

JavaScript HTML

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;
});