Javascript equivalent to jQuery .show(200) with transition?

Question

I know $(".box").show(); is Jquery is the same as document.querySelector(".box").style.display = "block"; in JS. However, when .show(300) has a transition fade on it, I can't seem to replicate that in JS. Upon, 'mouseenter', a small tooltip box pops up. Currently I have:

let svgTarget = document.querySelector('svg #target' + newId);
svgTarget.style.fill = 'rgba(0,0,0,0.0)';

svgTarget.addEventListener('mouseenter', function (e) {
 d3.select('svg #tooltip' + newId)
  .transition()
  .duration(5000)
  .style("display", "inline");
 inOutBehavior(e, hoverState);
},)

The 'mouseenter' functionality works there's just no smooth transition, it's instantaneous. I'm using D3 to implement the transition but with no luck. I have also tried using an event listener with D3 but that also did not work. Is there a solution with vanilla JS or D3 that I am not seeing? Thanks!

can't you simply apply a CSS style and have it hook up to [an animation](https://animista.net/play/entrances/fade-in)? why persuing javascript at all for fading? — balexandre, Jul 02 '20 at 15:25
Yes you're right, just wondering if there's a way to do it with JS. Also, could you show me an example of applying CSS style and hooking it up to an animation? — Joe Spinelli, Jul 02 '20 at 15:30
@JoeSpinelli Not trying to be rude, but have you tried it? StackOverflow is not a place to ask for suggestion. See https://stackoverflow.com/questions/29017379/how-to-make-fadeout-effect-with-pure-javascript/29017547#29017547 — Ruan Mendes, Jul 02 '20 at 15:33
@JuanMendes I haven't worked with css animation yet so I've been struggling. Sorry about that, I'll do more research. Thanks for the resource! — Joe Spinelli, Jul 02 '20 at 17:02

score 1 · Answer 1 · answered Jul 03 '20 at 21:16

Have you tried setting the opacity rather than the display? I tried the following, and it seemed to fade into view in the way you described.

tooltip.transition().duration(5000).style("opacity", 0.9);

Let me know if this doesn't work, or if you have any questions!

score 1 · Answer 2 · answered Jul 03 '20 at 21:50

1

If you really want to do this without D3, then you could use transition-delay CSS option.

transition-delay: 200ms;
transition: opacity 1s ease;

Here is an example.. https://codepen.io/soichih/pen/LYGeorr

You can not animate the display state.

answered Jul 03 '20 at 21:50

Soichi Hayashi

3,384
2
22
15

Javascript equivalent to jQuery .show(200) with transition?

2 Answers2