javascript - 高度不会一直过渡

Question

我试图先显示一个元素，然后再隐藏它。单击按钮时，将添加一个类，该类具有 opacity 和 max-height 值。完成动画后，该类将被删除，并且由于过渡延迟，该元素会在屏幕上停留一秒钟。

问题是，当按钮被选中时，元素不会达到其全高，除非:

• transition 从 max-height 400ms ease, opacity 100ms ease 更改为 all 400ms JSFiddle
• elem.classList.remove('show'); 从 transition callback 中移除。 JSFiddle
• 如果按钮被快速重复点击。

我做错了什么，我该如何解决？ (我需要 max-height，而不是 height。)

JSFiddle

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.add('show');
});

elem.addEventListener("transitionend", function() {
  elem.classList.remove('show');
}, false);

#reference {
  height: 100px;
  background-color: lightblue;
  font-size: 20px;
  text-align: center;
}
#elem {
  background-color: orange;
  font-size: 20px;
  text-align: center;
  max-height: 0px;
  opacity: 0;
  transition: max-height 400ms ease, opacity 100ms ease;
  transition-delay: 1000ms;
}
#elem.show {
  opacity: 1;
  max-height: 100px;
  transition-delay: 0ms;
}
#inner-content {
  padding: 20px;
}

<div id="reference">Height of 100px</div>
<button id="btn">Press Me</button>
<div id="elem">Should get a height of 100px
  <div id="inner-content">Some Text</div>
</div>

Answer 1

2 件事；

• 您的 transitionend 在 100 毫秒后触发，即不透明度，因此最大高度还剩 300 毫秒，当您切换类时，这当然会被取消

• inner-content 不够大，无法占据 100px 的高度

因此，如果您像这样更新您的 transitionend 函数，它将工作并等待 max-height 触发

elem.addEventListener("transitionend", function(e) {
    if (e.propertyName != 'opacity') {
      elem.classList.remove('show');
    }
}, false);

堆栈片段

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
    elem.classList.add('show');
});

elem.addEventListener("transitionend", function(e) {
    if (e.propertyName != 'opacity') {
      elem.classList.remove('show');
    }
}, false);

#reference {
    height: 100px;
    background-color: lightblue;
    font-size: 20px;
    text-align: center;
}
#elem {
    background-color: orange;
    font-size: 20px;
    text-align: center;
    max-height: 0px;
    opacity: 0;
    transition: max-height 400ms ease, opacity 100ms ease;
    transition-delay: 1000ms;
}

#elem.show {
    opacity: 1;
    max-height: 100px;
    transition-delay: 0ms;
}

#inner-content {
    padding: 40px;
}

<div id="reference">Height of 100px</div>
<button id="btn">Press Me</button>
<div id="elem">Should get a height of 100px
    <div id="inner-content">Some Text</div>
</div>