高度不会一直过渡

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 秒缓，不透明度 1 秒缓；

这是屏幕视频：https://www.screencast.com/t/Z1OFiQabl

Answer 2

2 件事；

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

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

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

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

堆栈sn-p

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>

Answer 3

要解决多次点击和过渡高度问题，您需要做一些变通方法。 transitionend 实际上会触发四次。最大高度两次，不透明度两次。您需要跟踪单击按钮的时间并在第四次转换后将其重置。高度没有达到完整 100 像素的原因是因为您在不透明度转换之后立即删除了 show 类，而不是第一个最大高度。如果您将console.log(e.propertyName) 放在您的transitionend 事件侦听器中，您可以看到这一点。这段代码有效，但有点难看。我敢肯定，如果您考虑一下，会有更好的方法来做到这一点。

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var hasClick = false;
var maxCount = 1;
btn.addEventListener('click', function() {
  if(!hasClick) {
      elem.classList.add('show');
      hasClick = true;
    }
  
});

elem.addEventListener("transitionend", function(e) {
  console.log(e.propertyName);
  if(e.propertyName=="max-height"){
    elem.classList.remove('show');
    
    if(maxCount>1){
        hasClick = false;
        maxCount = 0;
     }
    maxCount++
    }
}, 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>