0

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?

1MoreLineOfCode
  • 1
  • 1
  • You can't transition the display attribute. You can still let your button power that attribute, but you'll have to use an attribute that can be transitioned like opacity, max-height, etc. https://www.w3schools.com/cssref/pr_class_display.asp https://www.w3schools.com/cssref/css_animatable.asp – AStombaugh May 29 '22 at 20:44
  • also: [JavaScript - add transition between display:none and display:block](https://stackoverflow.com/questions/40446658/javascript-add-transition-between-displaynone-and-displayblock) – pilchard May 29 '22 at 20:46

2 Answers2

0

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.

1508.dev
  • 15
  • 2
  • thank you. and I do understand your answer and its validity. I am using javascript for it for the sake of just practicing scripts and trying experiment. – 1MoreLineOfCode May 29 '22 at 21:32
0

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;
});
Giuliano
  • 1
  • 2
  • 2
  • thank you. I was curious how that is going to affect spacing. My main reason for using none and block is the goal of alignment and the element appearing between two div elements. – 1MoreLineOfCode May 29 '22 at 21:34