是否可以在 Javascript 中添加转换（如 CSS）？

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

像这样的东西是 Vanilla JS

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

Answer 3

有两种解读方式"latency"。我将向您展示如何执行这两种实现。

延迟。 6 毫秒将过去，然后将播放过渡。在 JavaScript 中，这是按以下方式完成的：

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

时长。如果你想让你的动画持续 6ms，那么你可以做如下事情：

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 毫秒太快了，看不出来。它只是作为一个即时变化出现。

是否可以在 Javascript 中添加转换（如 CSS）？

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

html

javascript

css

styles

tooltip