Is it possible to add a transition (like in CSS) in Javascript?

Question

I have a Javascript code that shows a tooltip when hovering over an HTML element. Now I want to give this element a latency of about 6 milliseconds. In CSS it is very easy with the transition command. However, I did not find a transition style command in Javascript. Is there a solution or do I have to change to another programming language?

Javascript code:

var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);

function bghtooltipinmouseOver() {
  bghtooltipout.innerHTML = 'Go to Login';
  bghtooltipout.style.color = "white";
  bghtooltipout.style.top = "0";
}

function bghtooltipoutmouseOut() {
  bghtooltipout.innerHTML = ' ';
  bghtooltipout.style.top = "-99999px"
}

Does your code work? Or does it work except for the 6 ms latency? — programmerRaj, May 09 '20 at 01:11

score 2 · Accepted Answer · answered May 09 '20 at 01:09

2

You can use something like this:

bghtooltipout.style.transition = "all 6s";

answered May 09 '20 at 01:09

esteban21

139
9

score 1 · Answer 2 · answered May 09 '20 at 01:10

1

something like this it works is Vanila JS

bghtooltipout.style.transition = "all 2s";

answered May 09 '20 at 01:10

Umair Latif

518
4
6

score 1 · Answer 3 · answered May 09 '20 at 02:35

There are 2 ways to interpret "latency". I will show you how to perform both implementations.

Delay. 6ms would pass, and then the transition would play. In JavaScript, this is done as the following:

setTimeout(function() {
  // Code here
}, delay_in_ms);

Duration. If you want your animation to last for 6ms, then you would do something as follows:

const element = document.querySelector("#testthing");

element.addEventListener("mouseover", function(){
  this.style.opacity = "0";
  this.style.transition = "opacity 0.6s";
});

element.addEventListener("mouseout", function(){
  this.style.opacity = "1";
  this.style.transition = "opacity 0.6s";
});

#testthing {
  width: 100px;
  height: 100px;
  background: red;
}

<div id="testthing"></div>

PLEASE NOTE: In this example, the transition actually lasts for 600 milliseconds, not 6. This is because 6ms is just too quick to see. It just appears as an instant change.

Is it possible to add a transition (like in CSS) in Javascript?

3 Answers3