是否可以在 Javascript 中添加过渡（如在 CSS 中）？答案

【问题标题】：Is it possible to add a transition (like in CSS) in Javascript?是否可以在 Javascript 中添加过渡（如在 CSS 中）？
【发布时间】：2020-05-09 01:04:53
【问题描述】：

我有一个 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"
}

【问题讨论】：

setTimeout 可以使用。
您的代码有效吗？或者除了 6 毫秒的延迟之外它还能工作吗？

标签： javascript html css styles tooltip

【解决方案1】：

你可以这样使用：

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

【讨论】：

【解决方案2】：

类似的东西是 Vanila JS

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

【讨论】：

【解决方案3】：

有两种解释“延迟”的方法。我将向您展示如何执行这两种实现。

延迟。 6ms 会过去，然后过渡会播放。在 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;
}

&lt;div id="testthing"&gt;&lt;/div&gt;

请注意：在此示例中，转换实际上持续了 600 毫秒，而不是 6 毫秒。这是因为 6 毫秒太快了，无法看到。它只是以即时变化的形式出现。

【讨论】：