Можно ли добавить переход (как в CSS) в Javascript?

Question

У меня есть код Javascript, который показывает всплывающую подсказку при наведении курсора на элемент HTML. Теперь я хочу задать этому элементу задержку около 6 миллисекунд. В CSS это очень просто с помощью команды перехода. Однако я не нашел команды стиля перехода в Javascript. Есть ли решение или мне нужно перейти на другой язык программирования?

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"
}

Answer 1

Вы можете использовать что-то вроде этого:

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

Answer 2

Есть 2 способа интерпретации "задержки". Я покажу вам, как выполнить обе реализации.

1. Задержка. Пройдет 6 мсек, а затем заиграет переход. В JavaScript это делается следующим образом:

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

Продолжительность. Если вы хотите, чтобы ваша анимация длилась 6 мс, сделайте следующее:

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>

ОБРАТИТЕ ВНИМАНИЕ: в этом примере переход фактически длится 600 миллисекунд, а не 6. Это потому, что 6 мсек слишком быстро, чтобы увидеть. Это просто мгновенное изменение.

Answer 3

примерно так работает это Ванила JS

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