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>

JavaScript使用CSS不透明度转换淡入淡出

1 个答案: