Question

我对javascript很新，所以这可能是一个愚蠢的问题。

我的开放动画效果很好，但是关闭的动画不起作用/开火。它应该像倒转动画一样简单，但这似乎不起作用我必须在这里遗漏一些东西。有更好的方法吗？
一直试图弄清楚这一点。

HTML

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* DivTable.com */
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

的JavaScript

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details &#9650;";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details &#9660;";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

这是JSFiddle：https://jsfiddle.net/1zryo2Lp/

Answer 1

因为在setInterval有机会执行document.getElementById("id-DetailsPanel").style = "display:none";之前发生了。一个简单的解决方法是在display:none

之后移动clearInterval(int);行

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details &#9650;";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details &#9660;";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  // document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
      document.getElementById("id-DetailsPanel").style = "display:none";
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

手风琴关闭动画不起作用。它打开（带动画）并关闭（没有动画）

1 个答案: