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

使用XComponent和height: 0代替height: auto。

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

编辑：display: none和display: none立即生效，因此我认为过渡无法正常进行。使用setTimeout，它仍然可以工作。

display: block

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

Answer 2

您应该将display: none上的#a:not(.clicked)更改为visibility: hidden，然后它才能正常工作。

display: none表示该标签不会出现。 visibility: hidden表示为标签分配了空间。它已渲染，但不可见。

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

#b:not(.clicked), #a: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>

为什么不透明度不动画？

2 个答案: