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

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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);

Stack snippet

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 2

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

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您的过渡速度太快，无法完成高度。尝试将您的过渡转换为-----过渡：max-height 2s轻松，不透明1s轻松;

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

高度不会一直过渡

JSFiddle

3 个答案: