css - 为什么不透明度没有动画？

Question

在下面的代码中，“示例 A”没有动画，而“示例 B”有。

唯一不同的是，A以前是不显示的，B以前是隐藏的。

document.getElementById('set').onclick = function() {
  document.getElementById('a').classList.add('clicked');
  document.getElementById('b').classList.add('clicked');
};

document.getElementById('reset').onclick = function() {
  document.getElementById('a').classList.remove('clicked');
  document.getElementById('b').classList.remove('clicked');
};

.example {
  background: blue;
  transition: opacity 2000ms ease;
}

.example.clicked {
  opacity: 0;
}

.example:not(.clicked) {
  opacity: 1;
}

#a:not(.clicked) {
  display: none;
}

#b:not(.clicked) {
  visibility: hidden;
}

<button id="set">Show and fade out</button>
<button id="reset">Reset</button>

<div id="a" class="example">Example A</div>
<div id="b" class="example">Example B</div>

为什么会有两种不同的行为？为什么不透明度不总是动画？

Answer 1

使用 height: 0 和 height: auto 而不是 display: none。

查看此答案:Transitions on the display: property

编辑:display: none 和 display: block 立即应用，所以我认为转换无法工作。使用 setTimeout，它可以工作。

document.getElementById('set').onclick = function() {
  document.getElementById('a').style.display = "block";
  document.getElementById('a').style.opacity = 0;

  setTimeout(()=>{
    document.getElementById('a').style.opacity = 1;
  }, 0);
};

document.getElementById('reset').onclick = function() {
  document.getElementById('a').style.opacity = 0;
  setTimeout(()=>{
    document.getElementById('a').style.display = "none";
  }, 2000);
};

.example {
  background: blue;
  transition: opacity 2000ms ease;
  overflow: hidden;
  display: none;
}

.example.clicked {
  opacity: 1;
}

.example:not(.clicked) {
  opacity: 0;
}

#b:not(.clicked) {
  height: 0;
}

<button id="set">Show and fade out</button>
<button id="reset">Reset</button>

<div id="a" class="example">Example A</div>
<div id="b" class="example">Example B</div>