javascript - 动画等待执行

Question

我正在尝试使用 CSS 为元素高度设置动画。我这样做的方式是，我向一个元素添加了一个触摸事件。该函数将 className 添加到应该隐藏的元素，即高度为 0。

问题是，当元素被点击时，本应获得 0 高度的 div 暂停了一秒钟，然后获得了所需的高度。似乎动画持续时间越长，它在动画之前等待的时间就越长。

相关代码如下:

transition: max-height 2s ease-in-out;

JSFiddle

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.className = 'hide';
}

function hideCallback(e) {
  console.log(e.propertyName);
}

#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  max-height: 500px;
  padding: 10px 0;
  box-sizing: border-box;
}
#body.hide {
  transition: max-height 2s ease-in-out;
  max-height: 0;
}
#innerBody {
  height: 200px;
  background-color: orange;
}

<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>

Answer 1

您正在为 max-height 而不是 height 设置动画。为 max-height 设置动画是一个技巧，用于为高度未知的元素设置高度动画。您声明了一个非常大的 max-height，只要未知高度小于 max-height，它就可以工作。唯一的缺点是，由于您为大于实际高度的东西设置动画，因此会有延迟。在这种情况下，您的 max-height 为 500px，而高度(包括填充)仅为 220px，这意味着有更多的时间(~1.1 秒)只是将 max-height 减小到 220px ，当它到达那里时，视觉开始动画。

如果像这个例子一样，您知道元素的实际高度(220 = padding 10 + innerBody 高度 200)，您可以为确切的高度设置动画。

如果您事先不知道高度，请尝试降低 max-height 估计值并使用快速启动的缓动，例如 ease-out 或使用 javascript设置开始和结束高度。

已知高度:220px(在全屏中观看):

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.className = 'hide';
}

function hideCallback(e) {
  console.log(e.propertyName);
}

#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  height: 220px;
  padding: 10px 0;
  box-sizing: border-box;
}
#body.hide {
  transition: height 2s ease-in-out;
  height: 0;
}
#innerBody {
  height: 200px;
  background-color: orange;
}

<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>

使用 javascript 的未知高度 - 在动画开始前设置实际高度，等待下一帧，并将其更改为 0(在全屏中观看):

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.style.height = body.scrollHeight + 'px'; /** sample actual height, and set it on element **/
  requestAnimationFrame(function() { // wait for next frame
    body.style.height = 0; // change height to 0
  });
}

function hideCallback(e) {
  console.log(e.propertyName);
}

#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  transition: height 2s ease-in-out;
}

#innerBody {
  height: 200px;
  background-color: orange;
}

<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>