Tengo un código Javascript que muestra información sobre herramientas al pasar el mouse sobre un elemento HTML. Ahora quiero darle a este elemento una latencia de aproximadamente 6 milisegundos. En CSS es muy fácil con el comando de transición. Sin embargo, no encontré un comando de estilo de transición en Javascript. ¿Hay alguna solución o tengo que cambiar a otro lenguaje de programación?

Código Javascript:

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"
}
1
Luca Kammerer 9 may. 2020 a las 04:04

3 respuestas

Puedes usar algo como esto:

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

1
esteban21 9 may. 2020 a las 01:09

Algo como esto funciona es Vanilla JS

bghtooltipout.style.transition = "all 2s";
0
Umair Latif 9 may. 2020 a las 01:10

Hay 2 formas de interpretar la "latencia". Te mostraré cómo realizar ambas implementaciones.

  1. Retrasar. Pasarían 6 ms y luego jugaría la transición. En JavaScript, esto se hace de la siguiente manera:
setTimeout(function() {
  // Code here
}, delay_in_ms);
  1. Duración. Si desea que su animación dure 6 ms, entonces haría algo de la siguiente manera:
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>

TENGA EN CUENTA: en este ejemplo, la transición en realidad dura 600 milisegundos, no 6. Esto se debe a que 6 ms es demasiado rápido para ver. Simplemente aparece como un cambio instantáneo.

0
VirxEC 9 may. 2020 a las 02:35