CSS 不透明度过渡与显示：无

Question

我有一个菜单，我想用 javascript 淡入淡出。display: none我希望它从和过渡opacity: 0到display: flex和opacity: 1。但是，当我使用 javascript 将不透明度设置为 1 时，它不会转换，而是突然捕捉到 1，而如果我不将显示设置为 none，它会优雅地转换。我想使用display: none，因为在菜单出现之前，我需要能够捕获后台画布上的鼠标移动。我在这里制作了一个代码笔来演示这一点。

注意：我也希望能够使用 Javascript 淡出

我也看过这个问题，但第一个建议的答案无法淡出。

谢谢！

text = document.getElementById("text");
window.setTimeout((function () {
  text.style.display = "flex";
  text.style.opacity = "1";
}), 2000)

#text {
  display: none;
  opacity: 0;
  width: 500px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  align-items: center;
  justify-content: center;
  transition-duration: 2s;
  background-color: black;
  border-radius: 5px;
}

<div id="text">Testing Testing 123</div>

Answer 1

尽管看起来很奇怪，但答案是在代码中添加一行，如下所示：

window.setTimeout((function () {
  text.style.display = "flex";
  document.body.offsetHeight;  // Yes, this line!
  text.style.opacity = "1";
}), 2000);

除了在页面中执行“读取”数据之外，这一行没有什么特别之处（任何从 DOM 读取数据的操作都可以）。其作用是强制浏览器布局（或重排）页面。这很重要，因为一般来说，如果您执行一系列“写入”操作 - 例如添加元素或设置其样式，浏览器会将这些操作批量处理并立即执行所有操作。这意味着，当您将元素的不透明度设置为 0，然后设置为 1 时，浏览器会批量执行这些操作，并在回流页面之前一起执行它们，因此不会有动画。通过在其间插入写入操作，浏览器能够从元素的透明状态到完全不透明的状态进行动画处理。

让它消失有点不同：

text = document.getElementById("text");

window.setTimeout((function () {
  text.style.display = "flex"; // write operation
  document.body.offsetHeight; // read operation which forces reflow

  text.addEventListener('transitionend', function listener1() {
    text.removeEventListener('transitionend', listener1);
    
    text.addEventListener('transitionend', function listener2() {
      text.removeEventListener('transitionend', listener2);
      text.style.display = 'none'; // remove text
    });
    
    window.setTimeout(function () {
      text.style.opacity = 0.1; // hide text
    }, 1000);
  });
  
  text.style.opacity = 1; // write operation - show text
  
}), 2000);

最好等待上一转换完成后再开始新的转换。在事件触发后删除事件侦听器也是一个很好的做法。在从 DOM 中删除元素之前，您必须等待转换完成。在设置触发动画的样式之前不需要执行读取操作，因为页面已经布局，不透明度设置为1。我将不透明度设置为0.1，以便您可以看到元素实际上消失了。

你可以在这里看到 JFiddle。