CSS Transition失效问题排查：点击按钮展开信息框无过渡效果

我看了你的代码，发现过渡效果失效主要有两个核心原因，咱们一步步来修复：

问题1：display: none/block 无法触发过渡动画 #

CSS Transition对display属性的变化完全不支持——它是瞬间切换的状态，没有中间过渡的空间。你给.info设置的display: none和display: block会直接跳过过渡效果，导致opacity变化看不到动画。

问题2：height: auto 无法过渡 #

同样，浏览器没法计算height: auto到具体值的过渡区间，所以你给.pb-bottom切换height: 0和height: auto时，过渡动画也会失效。

修改后的完整代码 #

jQuery（优化了选择器，避免全局影响）

$(document).ready(function() {
  $('.opener').click(function() {
    // 只操作当前点击的按钮及其关联的内容
    $(this).toggleClass('turn');
    const parentBlock = $(this).closest('.pblock');
    parentBlock.find('.info').toggleClass('there');
    parentBlock.find('.pb-bottom').toggleClass('opened');
  });
});

CSS（核心修改了过渡的实现方式）

.program {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: red;
}
.pblock {
  top: 100px;
  position: relative;
  left: calc(50% - 45vw);
  width: 90vw;
  height: auto;
  min-height: 150px;
  margin: 0;
  padding: 0;
}
.pb-top {
  position: relative;
  height: 100px;
}
.date {
  color: white;
  font-size: 1.3em;
  font-family: 'FBold';
  display: inline;
  position: absolute;
  top: 70px;
}
.pb-bottom {
  position: relative;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  max-height: 0; /* 用max-height替代height */
  overflow: hidden; /* 隐藏超出容器的内容 */
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.opened {
  max-height: 1000px; /* 设置足够大的值，确保能容纳所有内容 */
}
.info {
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 10px; /* 增加内边距提升阅读体验 */
}
.there {
  opacity: 1;
  max-height: 1000px;
  padding: 10px; /* 配合默认状态的padding实现过渡 */
}
.opener {
  position: relative;
  top: 10px;
  width: 50px;
  left: calc(50% - 25px);
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid purple;
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
  animation: flicker 3s ease-in-out infinite;
}
.turn {
  transform: rotate(180deg);
}
@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

修改说明 #

1. 用max-height替代display和height: auto：通过max-height: 0（收起）和max-height: 1000px（展开）的切换，配合overflow: hidden实现内容的显示隐藏，同时让过渡动画能正常触发。
2. 优化jQuery选择器：用$(this)和closest()定位当前点击元素的父容器，避免多个节目项时出现全局触发的问题。
3. 补充padding过渡：给.info增加了padding的过渡效果，让展开收起的体验更流畅。

这样修改后，你的过渡动画就能正常工作啦！如果内容长度超过1000px，只需要调整max-height的数值即可。

内容的提问来源于stack exchange，提问作者ERRO