JavaScript 淡入淡出使用 CSS 不透明过渡

Question

我正在尝试使用 JavaScript 隐藏/显示元素。使用类似问题的代码作为引用。淡出正常工作，但出于某种原因，淡入不是:

function hidePages() {
  var pages = document.getElementsByClassName('page');
  for(var i = 0; i < pages.length; i++) {
    current = pages[i];
    current.style.opacity = 0;
    setTimeout(function(current) {
      current.style.display = 'none';
    }, 500, current);
  }
}

function navigate(page) {
  hidePages();
  var current = document.getElementById(page);
  setTimeout(function(current) {
    current.style.display = 'block';
    current.style.opacity = 1;
  }, 500, current);
}

.page {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

<a href="#" onclick="navigate('page1')">1</a> 
<a href="#" onclick="navigate('page2')">2</a> 
<a href="#" onclick="navigate('page3')">3</a>
<div class="page" id="page1">Page 1</div>
<div class="page" id="page2" style="display: none">Page 2</div>
<div class="page" id="page3" style="display: none">Page 3</div>        

JSFiddle:https://jsfiddle.net/z2svo5uu/

如您所见，一旦元素淡出，它就会立即出现。不过，我也想要淡入淡出的淡入淡出过渡。

我知道我可以使用 jQuery 更轻松地完成此操作，但我只是想知道为什么转换没有按预期进行？有人知道吗？

Answer 1

您正面临异步问题，因为您编写代码的方式在 hidePages 和 navigate 内几乎同时运行，并且超时不是标准的先执行，因为超时值总是近似的。有时，设置为 500ms 的超时可能会在 496ms 或 503ms 之后执行。

此外，尝试在 navigate 中的当前超时内使用嵌套超时，以将 display 中的更改与 opacity 中的更改分开。 1-10ms 范围内的时间可以正常工作以确保动画流畅运行。

片段:

function hidePages() {
  var pages = document.getElementsByClassName('page');
  for (var i = 0; i < pages.length; i++) {
    current = pages[i];
    current.style.opacity = 0;
    setTimeout(function(current) {
      current.style.display = 'none';
    }, 500, current);
  }
}

function navigate(page) {
  hidePages();
  var current = document.getElementById(page);
  setTimeout(function(current) {
    current.style.display = 'block';
    setTimeout(function(current) {
      current.style.opacity = 1;
    }, 10, current);
  }, 500, current);
}

.page {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

<a href="#" onclick="navigate('page1')">1</a>
<a href="#" onclick="navigate('page2')">2</a>
<a href="#" onclick="navigate('page3')">3</a>
<div class="page" id="page1">Page 1</div>
<div class="page" id="page2" style="display: none">Page 2</div>
<div class="page" id="page3" style="display: none">Page 3</div>