高度不会一直过渡

Question

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

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

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

您的过渡运行速度太快，高度无法完成。尝试将您的过渡更改为----- transition: max-height 2s ease, opacity 1s ease;

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

Answer 2

2 件事；

你的 transitionend 在 100 毫秒后触发，不透明度，因此 max-height 还剩下 300 毫秒，当你切换 class[ 时当然会被取消=18=]
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>

Answer 3

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

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>

高度不会一直过渡

Height doesn't transition all the way

javascript

css

transition

css-transitions

JSFiddle